TIL _ useEffect/상태끌어올리기

해달·2021년 8월 2일
0

TIL

목록 보기
23/80
post-thumbnail

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 함수

    1. 빈 배열 넣기
      useEffect(함수, [])
      컴포넌트가 처음 생성될때만 실행
      ex) 외부 API를 통해 리소스를 받아오고 API호출이 필요하지 않을때

    1. 아무것도 넣지 않기 (기본 형태)
      useEffect(함수)
      컴포넌트가 처음 생성되거나,
      porps,state가 업데이트 될때 실행

마치며,

처음 리액트를 공부할 때 부족한 부분이 많다고 느껴서 복습을 많이 했음에도 불구하고,
다시 코드를 짜려하니 손이 움직여지지 않았다.
effect Hook 이랑 얼른 친해지고싶다.

0개의 댓글