(S2W3) TIL 32일차 220316 (React, useEffect)

오늘의 학습목표

1. React 데이터 흐름
   • React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
   • 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
   • State 끌어올리기의 개념을 이해할 수 있다.
     • 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

학습내용

React에서는 데이터가 위에서 아래로, 단방향으로 흐릅니다.

상태 끌어올리기

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못합니다.

그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있습니다.

React가 제시하는 단방향 데이터 흐름의 해결책

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

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

 

오늘의 회고

오늘은 스프린트를 진행하면서 part 1은 크게 어렵지 않다고 느꼈지만 part 2는 좀 어렵다고 느꼈습니다. 노마드코더의 영화앱 만들기를하면서 리액트에 대한 이해도가 상승해서 그런 것 같습니다! part 2 내일 열심히 페어와 함께 잘 집중해서 해야겠습니다.