8# Hooks

GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판

(본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.)

 

 

 

 

 

 

 

 

 

 

 

        Hooks

• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState
• 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

 

 

 

---

 

 

 

'useState'

useState : 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

 

const [value, setValue] = useState(0);

=> 함수형 컴포넌트에서도 가변적인 상태

=> 카운터의 기본값을 0으로 설정하겠다는 의미이다.

=> useState 함수가 호출되면 배열을 반환한다. 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.

=> 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 리렌더링된다.

 

import React, { useState } from "react";

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <input value={name} onChange={onChangeName}></input>
      <input value={nickname} onChange={onChangeNickname}></input>
      <div>
        <div><b>이름:</b>{name}</div>
        <div><b>닉네임:</b>{nickname}</div>
      </div>
    </div>
  );
};

export default Info;

=> useState 함수는 하나의 상태 값만 관리할 수 있다. 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용한다.

 

 

 

 

---

 

 

'useEffect'

useEffect = componentDidMount(클래스 컴포넌트) + componentDidUpdate(클래스 컴포넌트)

• 컴포넌트 렌더링에 특정 작업을 수행할 수 있도록 지정하는 Hook.
• useEffect()의 두번째 매개변수 배열의 원소들의 이전 값과 현재 값을 비교한다.
• props, state 모두 가능

 

 

 

    // 마운트될 때만 실행
    useEffect(() => {
        console.log('렌더링 완료');
        console.log({
            name,
            nickname,
        });
    }, []);
    
    // 특정 값이 업데이트 될 때만 실행
    useEffect(() => {
        console.log('렌더링 완료');
        console.log({
            name,
            nickname,
        });
    }, [name]);

=> 마운트 될 때만 : 맨 처음에만 한번 실행되기를 원한다면 useEffect 2번째 인자에 빈 배열을 넣는다.

=> 특정 값이 업데이트 될 때만 : 특정 값이 변결될 때만 호출하고 싶다면, 2번째 인자에 그 변수를 포함한 배열을 넣는다.

 

 

import React, { useState, useEffect } from "react";

export default function Info() {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  useEffect(() => {
    console.log("effect");
    console.log(name);
    return () => {
      console.log("cleanup");
      console.log(name);
    };
  });


  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <b>name:</b> {name}
        <b>nickname:</b> {nickname}
      </div>
    </div>
  );
}

=> 뒷정리(cleanup) : 컴포넌트가 언마운트나 업데이트 되기 전 어떠한 작업을 수행하고 싶다면 반환하는 함수

=> useEffect 첫번째 인자의 반환 값에 return () => {}이 cleanup 함수이다.

 

 

 

 

 

---

 

 

 

 

'useReducer'

useReducer : 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수, useState와 비슷하며 Redux에서 같은 방식의 작업을 한다.

 

import React, { useReducer } from 'react';

function reducer(state, action) {
   switch (action.type) {
       case 'INCREMENT':
           return { value: state.value + 1 };
       case 'DECREMENT':
           return { value: state.value - 1 };
       default:
           // 아무것도 해당되지 않을 때 기존 상태 반환
           return state;
   }
}

const Counter = () => { 
    const [state, dispatch] = useReducer(reducer, { value: 0 });
    
    return (
        <div>
            <p>
                value : <b>{value}</b>
            </p>
            <button onClick={() => dispatch({ type: 'INCREMENT' }> +1</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' }> -1</button>
        </div>
    );
};

export default Counter;

=> const [현재 상태 값, 액션을 발생시키는 함수] = useReducer(리듀서 함수, 리듀서 초기값);

=> dispatch(action)과 같은 형태로 함수 안에 피라미터 액션 값을 넣어주면 함수가 호출되는 구조이다.

=> 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 장점이 있다.

 

 

 

 

 

 

---

 

 

 

 

'useMemo'

 

        useMemo

• 컴포넌트 내부에서 발생하는 연산을 최적화
• 인자로 함수와 의존 값을 받는다.
• 두번째 인자로 준 의존 인자 중에 하나라도 변경되면, 값을 재계산한다.
• 함수형 컴포넌트 안에서만 사용 가능하다.

 

 

 

        React.memo

• Higer-Order Components(HOC)
• HOC란 컴포넌트를 인자로 받아 새로운 컴포넌트를 다시 return 해주는 함수
• 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다.
• 컴포넌트가 같은 Props를 받을 때 같은 결과를 렌더링하면, React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지할 수 있다.
• 함수형 컴포넌트가 함수 내부에서 useState나 use Context 같은 훅을 사용한다면, state나 context가 변경될 때마다 리렌더링된다.

 

 

 

 

import React, { useState } from 'react';

const getAverage = nums => {
  console.log('평균값 계산 중..');
  if (nums.length === 0) return 0;
  const sum = nums.reduce((a, b) => a + b);
  return sum / nums.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };

  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값: </b> {getAverage(list)}
      </div>
    </div>
  );
};

export default Average;

=> getAverage 함수가 호출되는 것을 확인할 수 있다.

 

 

import React, { useMemo, useState } from 'react';

const getAverage = nums => {
  console.log('평균값 계산 중..');
  if (nums.length === 0) return 0;
  const sum = nums.reduce((a, b) => a + b);
  return sum / nums.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };

  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
      {/* getAverage -> avg */}
        <b>평균값: </b> {avg}
      </div>
    </div>
  );
};

export default Average;

=> useMemo 추가하고, useMemo 사용해서 list값이 변할때만 getAverage 함수가 호출된다.

 

 

 

 

 

 

---

 

 

 

 

 

'useCallback'

 

        useCallback

• useMemo와 비슷한 함수
• 주로 렌더링 성능을 최적화하는 상황에서 사용하며, 이벤트 핸들러 함수를 필요할 때만 생성한다.
• 숫자, 문자열, 객체처럼 일반 값을 재사용하려면 useMemo를 사용하고, 함수를 재사용하려면 useCallback을 사용한다.
• onChange와 onInsert 함수는 새로 렌더링 할 때마다 새로 생긴다.
• (첫 번째 파라미터 - 생성하고 싶은 함수) + (두 번째 파라미터 - 배열)

 

import React, { useState, useMemo, useCallback } from "react";

const getAverage = (numbers) => {
  console.log("calculating now");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

export default function Average() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []);

  const onInsert = useCallback(
    (e) => {
      const nextList = list.concat(parseInt(number, 10));
      setList(nextList);
      setNumber("");
    },
    [number, list]
  );

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <h1>Average</h1>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>Enroll</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
}

=> onChange처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용하게 되며, onInsert처럼 배열 안에 number와 list를 넣게 되면 인풋 내용이 바뀌거나 새로운 항목이 추가될 때 새로 만들어진 함수를 사용하게 된다.

=> 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.

 

 

 

 

 

---

 

 

 

 

'useRef'

useRef : 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 하는 함수. 컴포넌트의 로컬 변수를 사용해야 할 때도 활용 가능하다. 즉, useRef 객체는 렌더링에 영향을 미치지 않는다.
JavaScript 사용 시! : 특정 DOM을 선택해야 하는 상황에 getElementByld, querySelectior 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

 

 

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

const getAverage = nums => {
  console.log('평균값 계산 중..');
  if (nums.length === 0) return 0;
  const sum = nums.reduce((a, b) => a + b);
  return sum / nums.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');
  // useRef 사용
  const inputEl = useRef(null);

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성

  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
      inputEl.current.focus();
    },
    [number, list],
  ); // number, list 가 바뀌었을 때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      {/* ref 적용 */}
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값: </b> {avg}
      </div>
    </div>
  );
};

export default Average;

=> useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가르킨다.

 

 

import React, { useRef } from 'react';

const refSample = () => {
    const id = useRef(1);
    const setId = (n) =>{
        id.current = n;
    }

    const printId =() =>{
        console.log(id.current);
    }
    return (        
        <div>
            refsample
        </div>
    );
};

export default refSample;

=> ref 안의 값이 바뀌어도 컴포넌트가 렌더링 되지 않는다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

'후기 및 정리'

• 리액트에서 Hooks 패턴을 사용하면 클래스형 컴포넌트를 작성하지 않고도 대부분의 기능을 구현할 수 있다.
• 이러한 기능이 리액트에 릴리즈 되었지만, 기존의 setState를 사용하는 방식이 잘못된 것은 아니다.
• 리액트 매뉴얼에 따르면 기존의 클래스형 컴포넌트는 앞으로도 계속해서 지원될 예정입니다. 즉, 함수형 컴포넌트와 Hooks을 사용하는 형태로 전환할 필요는 없다.
•  메뉴에서는 새로 작성하는 컴포넌트의 경우 함수형 컴포넌트와 Hooks를 사용할 것을 권장하고 있다. 

 

---

 

• useCallback/useMemo : 함수를 리턴하느냐, 값을 리턴하느냐 차이
• useEffect/useCallback : 라이프사이클을 위한 훅과 함수를 재사용하기 위한 훅 차이

 

 

---

 

 

참고

useEffect, useMemo, useCallback 완벽히 이해하기 (tistory.com)

useEffect, useCallback, useMemo 비교 (velog.io)