[정리] REACT, 데이터 흐름의 이해와 비동기

---

Lifting State Up  ✔️

 

props로는 상위에서 하위 컴포넌트로밖에 전달되지 못하기 때문에 하위 컴포넌트에서 state를 통해 상위 컴포넌트의 내용을 변경할 수 있다.

props는 상위 -> 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체로 받는다.

 

Effect Hook  ✔️

 

리액트에서 순수 함수(only 함수의 입력만이 함수의 결과에 영향을 주는 함수)만 있는 것이 아니기 때문에 
side effect가 발생한다.

발생되는 경우는 fetch를 이용해 외부 데이터를 이용하거나, localStorage에서 데이터를 받거나
setTimeOut과 같은 타이머를 사용할 때 등 발생된다.

useEffect를 사용하여 side effect를 처리할 수 있는데, 최상위에서만 Hook을 호출하고, React 함수 내에서 호출한다.

첫 번째 인자는 함수, 두 번째 인자는 종속성 배열이 온다.
두 번째 인자로 빈 배열을 넣으면 처음 생성될 때에만 실행된다.
아무것도 넣지 않으면 첫 생성 시, 업데이트 시 실행된다. 하지만 그렇다고 비워두는 것을 권장하지 않고 관련된 배열을 넣어주자

 

---