TIL 23.02.02

오늘은 React 데이터의 흐름에 대해서 배웠다.

 

React는 컴포넌트를 조립하며 상향식으로 앱을 만듣는 것이 선호되며,

하나의 컴포넌트는 단일 책임의 원칙을 다른다.

 

컴포넌트들은 트리구조로 나타낼 수 있고, props를 통해 데이터를 전달하며

단방향 데이터 흐름 원칙을 가진다.

 

하지만, 하위 컴포넌트에서 부모 state를 변경할 경우도 생기는데,

역방향 데이터 흐름을 방지하기 위해 상위 컴포넌트의 상태 변경 함수를

하위 컴포넌트가 전달받을 수 있도록 상태를 끌어올려 관리한다.

 

상위 컴포넌트의 search라는 아래의 함수를  하위컴포넌트에 onSearch라는 porps로 전달하였다. 

전달받은 하위 컴포넌트에서는 검색된 값과 onSearch를 이용하여 search를 재설정해줄 수 있었다.

 

상태 끌어올리기를 통해 하위컴포넌트에서도 상위 컴포넌트의 state를 변경가능 한 것을 볼 수 있었다.

 

-끝-