[React] Hooks 정리

💡 useState

// useState 함수 사용하기
import { useState } from "react";

const Counter = () => {
  const [value, setValue] = useState(0); 
  return (
    <div>
      <p>현재 카운터 값은 {value} 이다.</p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
export default Counter;

useState 는 하나의 상태 값만 관리할 수 있으나 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러 번 사용하면 된다.
useState(0) 이란 초기값을 0 으로 하겠다는 의미이다.
const [value, setValue] 에서 첫 번째 원소인 value 는 상태 값, 두 번째 원소인 setValue 는 상태를 설정하는 함수이다.
이 함수에 파라미터를 넣어서 호출하면(setValue(value+1) 과 같이) 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링한다.

웹 실행 화면

useState 여러 번 사용하기

import { 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 value={nickname} onChange={onChangeNickName} />
      <div>이름 : {name}</div>
      <div>닉네임 : {nickname}</div>
    </div>
  );
};

export default Info;

웹 실행 화면

💡 useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 이다. useEffect 는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다. 클래스 형 컴포넌트인 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방하다.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({
      nickname,
    });
  }, [nickname]);

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

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

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

export default Info;

useEffect 를 특정 값이 업데이트 될 때만 호출하고 싶으면, useEffect 의 두 번째 파라미터로 전달되는 배열 [ ] 안에 검사하고 싶은 값을 넣어 주면 된다.

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({
      nickname,
    });
  }, [nickname]);

검사하고자 하는 값을 nickname 으로 설정했더니 nickname 이 바뀔 때만 useEffect 의 함수를 실행하는 것으로 바뀌었다.

웹 실행 화면

useEffect 뒷정리 하기

컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶으면 useEffect 에서 뒷정리(clean up) 함수를 반환해주어야 한다.

// App.js
import React, { useState } from "react";
import Info from "./Info";
const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setVisible(!visible);
          console.log(!visible);
        }}
      >
        {visible ? "숨기기" : "보이기"}
      </button>
      <hr />
      {visible && <Info />}
    </div>
  );
};
export default App;

// Info.js
import { useState, useEffect } from "react";
const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");
  useEffect(() => {
    console.log("effect");
    return () => { // cleanup 함수 반환
      console.log("unmount");
    };
  }, []);
  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeNickName = (e) => {
    setNickname(e.target.value);
  };
  return (
    <div>
      <input value={name} onChange={onChangeName} />
      <input value={nickname} onChange={onChangeNickName} />
      <div>이름 : {name}</div>
      <div>닉네임 : {nickname}</div>
    </div>
  );
};
export default Info;

렌더링 될 때마다 뒷정리 함수가 계속 나타나는 것을 확인할 수 있다. 뒷정리 함수가 호출될 때는 업데이트 되기 직전의 값을 보여준다. 언마운트(컴포넌트가 DOM 에서 제거되는 것, 여기서는 숨기기 버튼 누를 때를 의미한다.) 될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두 번째 파라미터에 비어 있는 배열을 넣으면 된다.

웹 실행 화면

💡 useReducer

useReducer 는 useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook 이다. Reducer 는 현재 상태(state), 그리고 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수이다. useReducer 에서 action 은 그 어떤 값도 사용 가능하며, reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

// useReducer 사용하기

import { 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>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </div>
  );
};
export default Counter;

useReducer 의 첫 번째 파라미터에는 reducer 함수를 넣고, 두 번째 파라미터에는 해당 reducer 의 기본값 {value: 0} 을 넣어준다. 이 Hook 을 사용하면 state 값과 dispatch 함수를 받아 온다. 여기서 state 는 현재 가리키고 있는 상태고, dispatch 는 액션을 발생시키는 함수이다. dispatch(action) 과 같은 형태로, 함수 안에 파라미터로 action 값을 넣어주면 reducer 함수가 호출되는 구조이다.

// Info.js
import { useReducer } from "react";
function reducer(state, action) {
  return {
    ...state,  // useReducer 로부터 전달받은 state 값 (name:'', nickname:'') 복사
    [action.name]: action.value, // action.name 은 e.target.name (input 의 name) 이며 action.value 는 e.target.value (input 의 value) 인 것이다.
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: "",  // reducer 에 ...state 값으로 전달하기
    nickname: "",
  });
  const { name, nickname } = state; // state 가 가지고 있는 name, nickname 값을 name, nickname 필드에 넣어준다.

  const onChange = (e) => {
    dispatch(e.target); // action 은 e.target
    console.log(e.target);
  };

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

export default Info;

dispatch(e.target) 으로 여기서 dispatch 가 전달하는 action 은 e.target 이다. 즉, action.name 은 e.target.name 이고 이것은 input 요소의 name 속성을 말한다. action.value 는 e.target.value 이고 이것은 input 요소의 value 속성을 말한다. 따라서 위의 input 요소에 name="name" 및 name="nickname" 을 명시해주지 않으면 input 에 값 입력이 불가하고, 실행이 제대로 되지 않는다.

웹 실행 화면

💡 useMemo

useMemo 를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

// Average.js
import { useState, useMemo } from "react";
const getAverage = (numbers) => {
  console.log("평균값 계산 중..");
  console.log(numbers);
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

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

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

  const onInsert = () => {
    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>
      {/* list 는 value 만 담긴 리스트로 됨. */}
      <div>
        <b>평균값: </b> {avg}
      </div>
    </div>
  );
};

export default Average;

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

useMemo 를 사용하면 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. 위의 코드에서는 list 의 값이 바뀌었을 때만 연산을 실행하도록 두 번째 파라미터를 list 로 두어 렌더링 할 때마다 검사하도록 했다.

<ul>
   {list.map((value, index) => (
   <li key={index}>{value}</li>
    ))}
</ul>

list.map 으로 인해 value 와 index 에 따라 <li> 태그로 묶여지고 list 로 묶여져 나온다.

💡 useCallback

// useCallback
import { useState, useMemo, useCallback } from "react";
const getAverage = (numbers) => {
  console.log("평균값 계산 중..");
  console.log(numbers);
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

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

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

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

  // 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식
  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>
      {/* list 는 value 만 담긴 리스트로 됨. */}
      <div>
        <b>평균값: </b> {avg}
      </div>
    </div>
  );
};

export default Average;

useCallback 의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. onChange 처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속해서 재사용하게 되며 onInsert 처럼 배열 안에 number 와 list 를 넣게 되면 input 내용이 바뀌거나 새로운 항목이 추가될 때 새로 만들어진 함수를 사용하게 된다.

💡 useRef

함수 컴포넌트에서 ref 를 쉽게 사용할 수 있도록 해 준다.

// useRef

import { useState, useMemo, useCallback, useRef } from "react";
const getAverage = (numbers) => {
  console.log("평균값 계산 중..");
  console.log(numbers);
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const inputEl = useRef(null);

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

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

  // 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식
  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      {/* list 는 value 만 담긴 리스트로 됨. */}
      <div>
        <b>평균값: </b> {avg}
      </div>
    </div>
  );
};

export default Average;

inputEl 은 input 요소를 말한다. inputEl.current 값이 실제 input 요소를 가리킨다. 로컬 변수는 렌더링과 상관없이 바뀔 수 있는 값을 의미한다.

도서 [리액트를 다루는 기술] 을 참고하여 작성한 글입니다.

'JavaScript > React' 카테고리의 다른 글

[React] SPA 란? (0)	2021.11.08
[React] 함수 컴포넌트에서 리렌더링 최적화를 위한 방법 (0)	2021.10.27
[React] 컴포넌트 알아보기 (0)	2021.10.26
[React] 글쓰기 기능 구현하기 (0)	2021.10.22
[React] Redux 폴더 구조 정리하기 (0)	2021.10.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[React] Hooks 정리

💡 useState

useState 여러 번 사용하기

💡 useEffect

useEffect 뒷정리 하기

💡 useReducer

💡 useMemo

💡 useCallback

💡 useRef

'JavaScript > React' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[React] Hooks 정리

💡 useState

useState 여러 번 사용하기

💡 useEffect

useEffect 뒷정리 하기

💡 useReducer

💡 useMemo

💡 useCallback

💡 useRef

'JavaScript > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역