JHeaon 개발일지

오늘은 리액트 State에 대해서 알아보자. 일단 아래코드를 살펴보자 아래 코드는 클릭 이벤트가 발생했을 때 title이 바뀌는 코드이다. 🖥️ ExpensItem.js import "./ExpenseItem.css"; function ExpensItem(props) { let title = props.title; const handleClick = () => { title = "안녕하세요!"; } return ( {props.date.toISOString()} {title} ${props.amount} hello ); } export default ExpensItem; 하지만 버튼을 눌렀을 경우 버튼 이벤트인 handleClick이 작동하지 않았음을 알 수 있다. 왜 작동하지 않는 걸까? 이는 리액트의..

오늘은 리액트에서 이벤트 핸들러를 수행하는 방법에 대해 알아보자 이벤트 핸들러 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트 처리하는 방식과 매우 유사하지만 몇 가지의 문법 차이가 존재한다. 문법의 차이는 다음과 같다. React의 이벤트는 소문자 대신 캐멀 케이스를 사용한다. 예) onclick (X), onClick (O) 일반적으로 props에서 이벤트를 찾을 때는 on접두사를 붙인 뒤 이벤트를 찾고, 함수의 이름은 handleClick처럼 handle 접두사를 지정하여 처리하는 것이 일반적이다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 아래부터는 여러 이벤트 헨들러를 다루는 예를 소개해볼 예정이다. 버튼 이벤트 핸들링 아래는 button에 새로..

오늘은 리액트의 JSX와 props에 대해 알아보자. JSX JSX(javascript xml)는 javascript를 확장한 문법이다. React을 통해 UI가 어떻게 생겨야 하는지 직관적으로 살펴볼 수 있으며 브라우저에서 실행되기 전에는 바벨을 사용하여 일부 자바스크립트 형태의 코드로 변환되어 사용된다는 특징을 가지고 있다. JSX 문법에서는 반드시 지켜야 하는 것들이 몇 가지가 있는데 이는 다음과 같다. 반드시 부모 요소 하나가 감싸는 형태여야 한다. 자바 스크립트 표현식을 작성하려고 한다면 JSX내부에서 코드를 {}로 감싸주면 된다. 쉽게 이야기하자면 javascript에서 값을 선언해서 JSX에서 사용할 때는 {}을 사용하여 처리한다. JSX로 css을 받아와 사용할 때에는 class가 아닌 c..

리액트란 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리이다. 물론 Html, Css, Javascript로 사용자 인터페이스를 구축할 수 있지만, 복잡한 인터페이스를 구축하기에는 조금 불편한 점이 있을 수 있다. 따라서 리액트의 힘을 빌려 좀 더 쉽게 인터페이스를 구축하기 위해 사용한다. 리액트 리액트는 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리 종류 중 하나이며 모두 컴포넌트(html, css, js의 결합물)로 구성되어 있다. 리액트를 사용하게 된다면 다음과 같은 이 점을 얻을 수 있다. 재사용성 증대 관리 용이성 증대 리액트 프로젝트 생성하고 실행하기 리액트 프로젝트를 생성하기 위해서는 node.js을 설치하여야 한다. 참고 : https://nodejs.org/ko Node.js..

리엑트를 활용하기 위해서 간단하게 자바스크립트의 내용을 압축해서 알아보자. 변수선언 (const, let) Javascript의 에서 변수선언은 const, let으로 할 수 있다. let은 값을 수정할 수 있는 변수를 선언할 때 사용하고 const는 값을 수정할 수 없는 변수를 선언할 때 사용한다. 그럼 일반적으로 let으로 변수를 선언하면 되지 않을까라고 생각이 들겠지만 const 키워드를 사용하면 의도치 않은 재할당을 방지를 도와주기 때문에 이를 구분하여 사용하는 것이 좋다. const a = 1; let b = 2; 🔖 var 선언 방식이 존재하지만 ES6에서는 호이스팅이라는 문제 때문에 추천하지 않는 방식이다. 참고 : https://developer.mozilla.org/ko/docs/Glos..