React - React Hook (중요 포인트)

공식 홈페이지

ko.reactjs.org/docs/hooks-intro.html

 

 

Hook 이란

React에서 제공하는 기능. (React 16.8 이후 추가됨)

함수형 컴포넌트에서 state와 lifeCycle method를 잘 사용할 수 있게 만들어진 것

this를 사용하지 않아 가독성 및 편리성이 좋고, 코드중복을 줄일 수 있다는 장점이 있다.

 

출처

ko.reactjs.org/docs/hooks-overview.html

 

 

---

 

state와 props가 변경될 때 호출 차이 (클래스컴포넌트 vs 함수형 컴포넌트)

클래스 컴포넌트에서 멤버변수는 클래스가 만들어질 때 한번만 만들어지고, render함수만 반복적으로 호출된다.

함수형 컴포넌트에서는 함수의 블럭안에 있는 코드 전부가 반복적으로 호출된다. (함수 내 지역변수 포함)

 

함수가 prop으로 자식컴포넌트에 전달되는 경우,

부모컴포넌트에서는 함수가 계속해서 새로 만들어지므로

자식컴포넌트에서는 prop의 오브젝트가 변경되었다 여기고 컴포넌트를 업데이트하기 때문에 

side effect가 발생할 수 있다. (아래 코드 참고)

 

이 때, useCallback() 을 이용해 함수를 메모리에 저장해 둘 수 있다.

 

--------------------------------------------------------------------------------------

const handleIncrement = () => {

    setCount(count + 1);

  }

 

  return (

      <button

        className="habit-button habit-increase"

        onClick={handleIncrement}

      >

        <i className="fas fa-plus-square"></i>

      </button>

  );

}

--------------------------------------------------------------------------------------

 

 

 

---

 

Hook의 사용법

useState, useRef, useCallback, useEffect

위의 api들은 모두 메모리에 별도로 저장시키기 때문에 업데이트로 인해 반복적으로 호출되어도 초기화 되지 않는다.

 

1. useState : state사용

const [변수명, set함수명] = useState(초기값);

 

2. useRef : ref사용

const 변수명 = useRef();

인자 없음.

 

3. useCallback : 함수를 메모리에 저장

const 함수명 = useCallback(함수);

 

4. useEffect : componentDidMount + componentDidupdate

useEffect(실행함수, 실행조건-변화했는지 체크할 변수의 배열)

두번째 인자는 필수아님.

두번째 인자를 넣지 않았을 때는 mount될때와 update될때 무조건 함수 실행.

 

 

 

--------------------------------------------------------------------------------------

import React, { useState, useRef, useCallback, useEffect } from 'react';

 

const SimpleHabit = (props) => {

 

  const [count, setCount] = useState(0);

  const spanRef = useRef();

  const handleIncrement = useCallback(() => {

    setCount(count + 1);    //count state사용 및 set

  });

 

  useEffect(()=>{

    console.log(`mount & update!! count : ${count}`);

  }, []);    //두번째 인자가 []일때는 mount일때만 함수 실행.

  return (

    <li className="habit">

      <span ref={spanRef} className="habit-name">Reading</span>

      <span className="habit-count">{count}</span>

      <button

        className="habit-button habit-increase"

        onClick={handleIncrement}

      >

        <i className="fas fa-plus-square"></i>

      </button>

    </li>

  );

};

 

export default SimpleHabit;

--------------------------------------------------------------------------------------