라이프 사이클 (클래스형 vs 함수형)-2 : React Hooks 란?

이해원·2021년 11월 28일
0

시작하기

목록 보기
7/27

what is a Hook?

기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다.또한 훅은 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 하였다.

Hook의 종류

⚡️ Effect Hook: useEffect

useEffect는 React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다. 리액트는 기본적으로 렌더링 이후에 effect를 실행한다. 그리고 effect 함수는 컴포넌트 내에 있기 떄문에 props와 state에 접근할 수 있다. 첫번쨰 렌더링과 이후 업데이트 시 마다 effect가 수행된다.

// 이렇게하면 계속해서 관찰한다.
useEffect(() => {
  console.log('렌더링')
})
// 두번째 인자에 빈 배열을 추가하면 한번 실행 후 더이상 관찰하지 않는다. 로딩 타이밍에 처음에 한번만 실행된다.
useEffect(() => {
  console.log('렌더링')
}, [])

⚡️ State Hook: useState

useState는 state와 setState()로 나뉘며 초기에 initialValue를 받고, 해당 초기값은 처음 렌더링시에만 사용한다. Hook은 간단히 말하면 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다.

-----------------------(기존 class를 통해 구현한것)------------------------

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    )
  }
}
-----------------------------(Hook 사용)--------------------------------

import React, { useState } from 'react'
function Example() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

⚡️ Other built-in Hook

useContext와 useReducer 라는 Hook도 존재한다. useContext는 컴포넌트를 중첩하지 않고 react context를 구독할 수 있다. 그리고 useReducer는 복잡한 컴포넌트의 상태들을 reducer로 관리할 수 있게 해준다.

이 밖에도 useMemo와 useCallback, useRef등 다양한 hook이 존재한다.

Hook의 규칙

✌️ Rules of Hooks

✅ 훅은 오직 리액트 함수 내에서만 사용되어야 한다. 일반적인 JavaScript 함수에서는 호출하면 안된다.

✅ 리액트 함수 최상위에서 호출해야 한다. -> 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다.

useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList) 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는것이다. 근데 만약 조건문이나 반복문안에서 훅을 썻다고 해보자, 그럼 훅이 어떤 조건에따라 실행되지 않을 수 있다.

그럼 렌더링 때마다 맨처음 함수가 실행될때 리액트가 기억해놓은 훅의 호출 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것이다. 이게 항상 리액트 함수 최상위 레벨에서만 훅을 호출해야하는 이유이다.

profile
미어캣입니당

0개의 댓글