TIL 37일차

섹션2의 React시작이다! 상태 끌어올리기라는것을 새롭게 배우게 되었고 흥미로웠다.

 

React에서의 데이터 흐름

React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 먼저 컴포넌트를 만들고, 페이지를 조립해나간다. 즉, 상향식(bottom-up)으로 앱을 만드는것이다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다.

State 끌어올리기

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있다. React가 제시하는 해결책은 다음과 같다.

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

여전히 단방향 데이터 흐름에 원칙에 부합하는 해결방법이다. 바로 이것이 "상태 끌어올리기" 이다.

 

Today's Key🔑

• 상태를 끌어올리는 방법: 상태를 변경하는 함수 그 자체를 하위 컴포넌트로 전달하고, 하위 컴포넌트에서 함수를 실행한다
• 섹션1에서의 리액트도 다시 볼 것!