프론트엔드/React2 [리액트] State와 useState 그리고 Hook ☑️ State 이벤트에 의해 변경되는 동적인 값으로 버튼 onClick, input입력으로 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우에 사용한다. 함수형 컴포넌트는 useState라는 훅을 사용해 state를 다룰 수 있다. * props와 state 차이 - props : 부모 컴포넌트가 설정하는 값, 읽기 전용 - state : 하위 컴포넌트도 데이터를 변경할 수 있다. ✔️Hook - 함수 컴포넌트에서 리액트 state와 생명주기 기능을 연동할 수 있게 해주는 자바스크립트 함수이다. - class 안에서 동작하지 않지만 class 없이 리액트를 사용할 수 있게 해준다. - 이미 짜놓은 컴포넌트를 전부 재작성 하는 것은 권장 x - 직접 만드는 것도 가능하다. - useState .. 2023. 7. 27. [React] JSX ✔️ JSX JS와 XML을 합쳤다. 자바스크립트 코드에서 태그 기반 구문을 써 리액트 엘리먼트를 정의할 수 있게 해준다. 속성이 붙은 복잡한 DOM트리를 작성할 수 있는 간편한 문법 제공한다. ✔️ 컴포넌트 리액트에서 앱을 이루는 가장 작은 조각 (블록)이다. 컴포넌트는 새로운 컴포넌트를 생성하거나 MVC 뷰를 독립적으로 구성하여 재사용할 수 있다. 함수 컴포넌트와 클래스 컴포넌트로 나뉜다. ◻️ property(props) : 부모컴포넌트에서 자식 컴포넌트로 전달되는 데이터로 프로퍼티 값을 자식 컴포넌트에서 수정할 수 없다. ◻️ state : 컴포넌트 상태 저장, 수정 가능한 데이터이다. ◻️ context: 부모 컴포넌트에서 생성해 모든 자식 컴포넌트에 전달 한다. 2023. 7. 26. 이전 1 다음
