- React의 데이터흐름
- 여러 컴포넌트 사이에서 어떤 방식으로 데이터를 전달하는지
- Effect Hook와 Ajax를 사용해 서버로 부터 데이터르 받는지
React 데이터 흐름
1. 단방향 데이터 흐름(one-way data flow)
먼저 컴포넌트 단위로 만들고, 페이지를 조립하는 상향식(bottom-up)으로 앱 제작 : 테스트 쉽고, 확장성 좋음
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.
즉, 데이터 흐름이 하향식(top-down)
데이터를 전달하는 주체 : 부모 컴포넌트.
state : 모든 데이터를 상태로 둘 필요X, 상태는 최소화로.
state로 둘 필요가 없는 경우
부모로부터 props를 통해 전달되는 경우
시간이 지나도 변하지 않는 경우
컴포넌트 안의 다른 state나 props를 가지고 계산 가능한 경우
상태 위치 정하기
상태가 특정 컴포넌트에서만 유의미하다 = 특정 컴포넌트에만 두면 됨
만약 하나의 상태를 기반으로 2개의 컴포넌트가 영향을 받는다 = 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치해야함.
즉, 2자식 컴포넌트가 하나의 상태에 접근하려면 2자식의 공통 부모 컴포넌트에 상태를 위치해야함
2. 역방향 데이터 흐름 추가
아깐 단방향이라면서?
-> 상태 위치를 정하고 나니, 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하게 됨.
-> 이를 해결하는 방법 "State 끌어올리기"
-> 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결한다. 마치 콜백함수와 비슷
💡정리
데이터를 전달하는 주체 = 부모 컴포넌트
리액트의 데이터 흐름 = 위에서 아래로 흐르는 하향식
단방향 데이터 흐름으로 아래에서 위로는 전달할 수 없다.
📌 State 끌어올리기
자식 컴포넌트에 의해 부모 컴포넌트의 state가 바뀌는 경우를 해결하는 역할
단방향 데이터 흐름에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터 형태에 대해서만 알 수 있다. 그게 state로부터 왔는지에 관한 출처는 알 수 없다.
그러므로 하위 컴포넌트에 의해 상위 컴포넌트의 상태가 바뀌는 건 이해가 안 될 수 있다. React는 다음과 같은 해결책을 제시한다
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.
💡정리
상위 컴포넌트의 “상태를 변경하는 함수”를 하위 컴포넌트로 전달하여, 하위 컴포넌트에서 해당 함수를 실행하는 방법
하위 컴포넌트의 상태를 참고해 상위 컴포넌트의 상태를 변경하고, props를 이용해 하위 컴포넌트에 전달한다.
영향을 주는 하위 컴포넌트 -> 상위 컴포넌트 상태 변경 -> 하위 컴포넌트로 props 내려 전달
상태를 변경시키는 함수를 하위 컴포넌트로 props 전달
단방향 데이터 흐름
Chapter2. Effect Hook
React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정
📌 Side Effect(부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우.
React에선 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 함.
React 컴포넌트에서의 Side Effect
타이머 사용 (setTimeout)
데이터 가져오기 (fetch API, localStorage)
📌 Effect Hook 기본
컴포넌트 내에서 Side effect를 실행할 수 있게 하는 hook
React 함수 내에서만 호출해야 한다.
API
useEffect(함수)
useEffect 첫번째 인자: 함수, 두번째 인자: 배열
: 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook.
이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여 타이틀을 변경한다.
다음과 같은 조건에서 실행됨.
