리액트는 단방향 데이터 흐름
을 가지며,
컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알 수 없다.
하위 컴포넌트에서 발생한 이벤트가 상위 컴포넌트의 상태를 변경시키는 것은 역방향 데이터 흐름
으로 보인다. 이 문제를 깔끔하기 위해서
사용하는 방법이 상태 끌어올리기
이다.
상태 끌어올리기란 ?
상위 컴포넌트의 '상태변경함수' 그 자체를 하위 컴포넌트로 전달하여, 이 함수를 하위 컴포넌트가 실행하도록 한다.
리액트에서의 side effect란 ?
함수형 컴포넌트의 밖에서 로컬의 상태를 변경하는 것을 뜻한다.
side effect 개념의 존재 이유?
대표적으로 비동기처리
가 있다.
서버에서 값을 받아 컴포넌트를 렌더링할때, 버퍼가 걸리는 상황이 생김
이때, 이 작업이 컴포넌트의 lifecycle에 영향을 주지 않는 방법으로 처리하면 좋다.
---> 외부에서 비동기로 서버와 통신하고, 컴포넌트의 state를 업데이트할 수 있는 side effect의 개념이 필요하다.
이때!! 사용할 수 있는것이 useEffect()
useEffect는 함수컴포넌트 안에서 side Effect를 가능하게 ㅁㄴ들어줌
- class compo의 componentDidMount,componentDidUpdate,
comonentWillUnmount의 역할을 한다. (하나의 api로 통합)- 최상위(at the top leel)에서만 Hook호출이 가능하다.