[React] states, props

states

• 변할 수 있는 값
• 컴포넌트 내에서 변하는 값을 처리하기 위해 react에서 만든 기능. state가 변할 때 마다 그 부분이 재랜더링된다.

props

• 컴포넌트가 받아오는 값

props 전달 방법

• 하위 컴포넌트 연결 구문 태그에 속성값으로 주면 그 쪽에서 객체로 받는다.

hook

hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수이다. hook은 class 안에서는 동작하지 않고 class 없이 react를 사용할 수 있게 해 주는 것이다.

react 데이터 흐름

리액트 개발 방식의 가장 큰 특징은 컴포넌트를 만들고 조립하는 bottom-up 방식이다. 즉 앱을 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일.

• 장점 : 테스트가 쉽고 확장성이 좋다.

여기서 컴포넌트는 데이터를 부모 컴포넌트에게서 props로 받게 된다. 자식 컴포넌트에서 부모 컴포넌트로 props를 줄 수는 없으며 상태 끌어올리기를 통해 받은 state를 변경함으로써 부모 컴포넌트에 영향을 끼칠 수는 있다.