리액트 hook 제대로 이해하자

0hyo·2021년 11월 17일
0
post-thumbnail

리액트 hook?

hook이란 단어가 잘 와닫지 않는다.
한만디로 표현한다면 hook이란 뭘까?

hook

  • (갈)고리, 걸이; (낚시) 바늘
  • 갈고리[호크]로 잠그다[걸다], 갈고리[호크]로 잠그게[걸게] 되어 있다

리액트에서 hook 사용

  • 컴포넌트에게 훅을 건다
  • 컴포넌트 생명 주기에 특정 명령을 내린다

지금까지 이해한 리액트 hook은 함수형 컴포넌트에서 사용되는 기술을 훅이라 부르며 상태관리와, 컴포넌트 생명주기 기능을 연동할 수 있게 해주는 함수이다.

생명주기?

컴포넌트의 수명 페이지에서 렌더링되기 전 준비과정에서 시작 -> 페이지에서 사라질때 끝난다.

mount?

컴포넌트가 처음 실행 될 때, DOM이 생성되고 웹 브라우저상에 나타는것을 뜻한다.
어떤일이 일어날까?

1.state, context, defaultProps 저장

2.componentWillMount

3.render

4.componentDidMount

업데이트 ?

props, state 변경이 일어날 때, 부모 컴포넌트 렌더링, forceUpdate() 를 실행

unmount?

컴포넌트 제거, DOM에서 제거

기본 내장 API 함수

useEffect

  • useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook
  • 처음 마운트될 때 실행, 새로운 props가 전달,상태(state)가 바뀔때
  • 예를 들면 api요청으로 외부 요소를 가져올 때 side Effect발생
  • 이를 컨트롤하기 위해 useEffect를 사용
  • useEffect(()=>{},[])
    첫번째 인자는 함수, 두번째 인자는 배열이며 이 배열은 조건을 담고 있다. 여기서 조건은 어떤 값의 변경이 일어날 때를 의미한다.
    빈 배열일 경우 처음 한번만 실행된다.
  • Side Effect란? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위

useState

  • 값이 변경 될 때마다 실행
    const [count, setCount] = useState(0);
    useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다.

useCallback

  • 함수를 메모이제이션하기 위해 사용되는 hook함수
  • 간단히 말하자면 함수 재사용
    const memoizedCallback = useCallback(함수, 배열);
  • 리액트 컴포넌트 안에 선언된 함수는 랜더링될 때 마다 새로운 함수로 생성된다.
    ->문제점 하위 컴포넌트는 함수가 달라졌다고 인식하여 리렌더가 발생된다.
  • useCallback을 사용하면, 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.
  • 두번째 인자의 배열은 의존성을 의미한다.
  • 언제사용할까?
  • 자식 컴포넌트에 함수를 props로 넘겨주는데 , 해당 자식 컴포넌트에 넘겨주는 함수 때문에 불필요한 리렌더링이 일어난다고 판단될 경우
  • 기존 함수를 계속 반환한다면 불필요한 리렌더가 일어나지 않을것이다. (방지)
    memoizaion? 이전 계산값을 메모리에 저장
profile
행동하는 프론트엔드 개발자 되어가는 중 👊 파이팅!!

0개의 댓글