TIL : 210628_월_(상태끌어올리기/Effect_Hook)(1)

beablessing·2021년 6월 29일
0

TIL

목록 보기
14/33
post-thumbnail

오늘배운것

  • 상태 끌어올리기
  • effect hook

상태 끌어올리기

  • 리액트는 단방향 데이터 흐름을 가지며,
    컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알 수 없다.

  • 하위 컴포넌트에서 발생한 이벤트가 상위 컴포넌트의 상태를 변경시키는 것은 역방향 데이터 흐름으로 보인다. 이 문제를 깔끔하기 위해서
    사용하는 방법이 상태 끌어올리기이다.

상태 끌어올리기란 ?
상위 컴포넌트의 '상태변경함수' 그 자체를 하위 컴포넌트로 전달하여, 이 함수를 하위 컴포넌트가 실행하도록 한다.

side effect

  • 리액트에서의 side effect란 ?
    함수형 컴포넌트의 밖에서 로컬의 상태를 변경하는 것을 뜻한다.

  • side effect 개념의 존재 이유?
    대표적으로 비동기처리가 있다.
    서버에서 값을 받아 컴포넌트를 렌더링할때, 버퍼가 걸리는 상황이 생김
    이때, 이 작업이 컴포넌트의 lifecycle에 영향을 주지 않는 방법으로 처리하면 좋다.
    ---> 외부에서 비동기로 서버와 통신하고, 컴포넌트의 state를 업데이트할 수 있는 side effect의 개념이 필요하다.
    이때!! 사용할 수 있는것이 useEffect()

useEffect는 함수컴포넌트 안에서 side Effect를 가능하게 ㅁㄴ들어줌

  • class compo의 componentDidMount,componentDidUpdate,
    comonentWillUnmount의 역할을 한다. (하나의 api로 통합)
  • 최상위(at the top leel)에서만 Hook호출이 가능하다.

useEffect()

  • 컴포넌트 내에서 side effect를 실행할 수 있게 해주는 Hook 이다.
  • 리액트에게 compo가 렌더링 이후에 어떤 일을 수행해야 하는지 알려준다.
profile
프론트엔드 개발자

0개의 댓글