Today 공부
- Effect Hook
- Lifting State Up (State 끌어올리기)
React 데이터 흐름
- React는
단반향 데이터 흐름(One-way data flow)을 따릅니다. - 또한, 컴포넌트는
props를 통해 전달받은
데이터가 어디서 왔는지전혀 알지못합니다.
하향식(top-down)데이터 흐름
위에서 아래로, 부모에서 자식으로(props,state)
데이터를 전달하는 주체는 부모 컴포넌트
상태 끌어올리기
- 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 것,
하위컴포넌트에서의 이벤드 발생이 부모의 상태를 바꾸어야 하는 상황이 왔을때 하는 행동
"State 끌어올리기(Lifting state up)"
- 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달(props)하고, 이 함수를 하위 컴포넌트가 실행한다
(use) Side Effect
- Side Effect (부가적인 작용)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다.React 컴포넌트에서의 Side Effect
데이터 가져오기 (fetch API . . .)
- Pure Function (순수 함수)
함수의 입력만이 함수의 결과에 영향을 주는 함수
입력으로 전달된 값을 수정하지 않는다
Effect Hook
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook
실행되는 경우
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행
Hook을 쓸 때 주의할 점
- 최상위에서만 Hook을 호출
- React 함수 내에서 Hook을 호출
useEffect(함수, [종속성1, 종속성2, ...])
- 첫번째 인자는 함수
해당 함수 내에서 side effect를 실행
- 두번째 인자는 (종속성)배열
배열 내의 종속성1, 또는 종속성2의
값이 변할 때, 첫 번째 인자의 함수가 실행
배열은 조건을 담고있으며,
조건은 어떤값의 변경이 일어날 때를 의미,
따라서 해당 배열엔 어떤 값의 목록이 입력 됨
단 한번만 실행되는 Effect 함수
- 빈 배열 넣기
useEffect(함수, [])
컴포넌트가 처음 생성될때만 실행
ex) 외부 API를 통해 리소스를 받아오고 API호출이 필요하지 않을때
- 아무것도 넣지 않기 (기본 형태)
useEffect(함수)
컴포넌트가 처음 생성되거나,
porps,state가 업데이트 될때 실행
마치며,
처음 리액트를 공부할 때 부족한 부분이 많다고 느껴서 복습을 많이 했음에도 불구하고,
다시 코드를 짜려하니 손이 움직여지지 않았다.
effect Hook 이랑 얼른 친해지고싶다.
