React hooks 시작하기

모두의희망·2023년 1월 9일
0

React Hooks 시리즈

목록 보기
1/3
post-thumbnail

React 컴포넌트의 생명주기

  • 리액트의 컴포넌트는 라이프 사이클(생명주기)가 존재한다.
  • 라이프 사이클은 Mounting(생성 될 때), Updating(업데이트 할 때),
  • Unmounting(제거 할 때) 세가지로 나뉜다.
    ▪ Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다.
    ▪ Updating : 컴포넌트가 업데이트 될 때를 말하며 props, state가 바뀌거나 부모 컴포넌트가 리렌더링, 혹은 forceUpdate 함수를 통해 강제로 렌더링 시킬때 등에 의한 상황에서 발생한다.
    ▪ Unmounting : 컴포넌트가 DOM에서 제거하는 과정을 언마운트라고 한다.


Hook이란 무엇인가?

  • 공식문서에 있는 설명을 보면 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수라고 한다.
  • Hook은 class 안에서는 동작하지 않고, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 한다.
  • react 라이브러리에서 import 하여 사용하며 컴포넌트 내부 최상단에서 선언하고 사용할 수 있다.


자주 사용되는 Hooks

useState

  • 상태(동적인 값)를 관리할 때 사용한다.
  • 값을 변경할 때 절대 상태를 직접 변경하는 것이 아닌 상태변경 함수에 값을 전달하는 방식으로 변경한다. (불변성)

useReducer

  • seState와 비슷하게 상태를 관리할 때 사용한다.
  • useState와 다른 점은 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
  • 단순한 값을 관리할 때는 useState를 사용하고
    복잡한 로직이나 여러 값을 관리할 때에는 useReducer를 사용한다.

useRef

  • 특정 DOM을 선택할 때 사용한다.
  • 컴포넌트와 별도로 변수를 관리할 때 사용한다.

useEffect

  • 마운트/언마운트/업데이트시 할 작업 설정할 때 사용한다.
  • 값이 변하면 업데이트 전, 후에 동일한 작업을 수행하게된다.
    두번째 인자에 빈 배열을 넣게되면 mount, unmount의 작업만 수행하게 된다.

useMemo

  • 이전에 계산한 값을 재사용할 때 사용한다.
  • 두번째 인자에 의존할 값을 넣으면 해당 값이 변할 때 마다 useMemo 또한 새로 연산된다.
  • 두번째 인자에 빈 배열을 넣으면 mount 시 한번만 연산된다.

useCallback

  • useMemo를 기반으로 만들어졌다.
  • 특정 함수를 재사용 하고싶을 때 사용한다.
profile
개발을 진정성 있게 다가가겠습니다.

0개의 댓글