[React] React Hook

정의

함수형 컴포넌트에서도 life cycle, state 관리를 할 수 있게 해주는 함수

 

이전의 React는 class형 컴포넌트로 life cycle, state 관리를 해왔다.

Hook이 도입되며 함수형 컴포넌트에서도 state, life cycle 관리를 할 수 있게 되었으며 React는 개념적으로 함수에 더 가깝기 때문에, class 대신 함수형 + hook을 권장하고 있다(공식문서)

 

동기 (기존의 문제점)

1. 컴포넌트들 사이에서 상태로직 재사용하기

이전에 class형 컴포넌트에 상태 로직이 종속적이었기 때문에 (constructor, componentDidMount 등) 컴포넌트의 계층이 깊어질수록 코드가 복잡해졌음.

=> useState 같은 React Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 함

 

2. 각 생명주기 메서드에 관련 없는 로직이 자주 섞임

이전 class형 컴포넌트에서는 생명주기에 관련한 로직을 짤 때 componentDidMount, componentDidUpdate, componentDidUnMount 란 함수를 썼음

쓸 수 있는 함수가 정해져있다보니 componentDidMount에 여러 로직이 섞이는 경우가 잦았음

=> React Hook은 여러 개의 useEffect를 쓸 수 있어 관련 있는 로직들끼리 하나의 작은 함수로 모을 수 있음

 

3. 개념적으로 더 가까운 Hook 권장

React 는 개념적으로 함수에 더 가깝기 때문에 class 없이 React를 사용할 수 있게 해주는 hook을 권장

 

State Hook

useState()로 state를 관리할 수 있음

 

기존에는 constructor안에 있는 this.state로 상태들을 관리했다. 그러나 React Hook의 useState를 쓰면 constructor에 구애받지 않고 함수형 컴포넌트 안에 상태들을 선언할 수 있다.

// class 형
this.state = {
  count: 0
};
    
// 함수형 useState
const [count, setCount] = useState(0);

 

state값을 업데이트할 때도 클래스형은 this.setState란 함수를 사용해서 this.state.count값을 업데이트해주어야하지만, 

useState는 선언할 때 만든 setCount(count)함수로 업데이트 해주면 된다.

// 클래스형
<button onClick={() => this.setState({ count: this.state.count + 1 })}>

// 함수형
<button onClick={() => setCount(count + 1)}>

 

예제

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>
    );
  }
}

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

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

Effect Hook

side effects를 수행하는 함수

- 여기서 side effects란 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에선 구현할 수 없는 작업을 뜻한다.

   ex. 컴포넌트 안에서 데이터를 가져오거나 구독하거나 DOM을 직접 조작하거나

 

기존의 클래스형 컴포넌트에는 주로 componentDidMount, componentDidUpdate, componentWillUnmount 함수를 썼다.

각 함수가 실행되는 시기는 밑 그림 참조

https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0

* React의 생명주기: 생성(mounting) -> 업데이트(updating) -> 제거 (unmounting)

 

React Hook의 useEffect는 위 세 함수를 합쳐놓은 함수이다.

대신 이전에는 3개의 함수에 필요한 로직들을 여러 개 구겨 넣었다면, 이젠 여러 개의 useEffect로 관련 있는 로직들만 모아서 하나의 함수로 구성할 수 있다.!

 

---

참조

https://ko.legacy.reactjs.org/docs/hooks-intro.html

https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0