• 목차
• 리액트 v16.8에 새로 도입된 기능이야
• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState
• 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해

8.1 useState

• 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줘 (함수형 컴포넌트에서 상태 관리 할 때 쓰면 돼)
• 사용법
  • useState의 파라미터에는 상태의 기본값을 넣어줘
  • useState는 호출되면 배열을 반환하는데 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수야
  • 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 리렌더링 돼

import React, { useState } from "react";

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

  return (
    <div>
      <p>
        현재 카운터 값 : <b>{value}</b>
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

export default Counter;

8.1.1 useState 여러 번 사용하기

• 하나의 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>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

8.2 useEffect

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이야
• 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 괜찮아 (위에 말이랑 똑같음 결국 컴포넌트가 렌더링 될 때마다 실행한다는 소리)
• 아래 코드처럼 작성하고 콘솔창을 확인해보면 input의 내용이 변경 될 때마다 useEffect가 실행되는걸 알 수 있어

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

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

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

  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>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

8.2.1 마운트될 때만 실행하고 싶을 때

• useEffect에서 설정한 함수를 컴포넌트가 처음 렌더링 될 때만 실행하고 업데이트 될때는 실행하지 않으려면 함수의 두 번째 파라미터로 빈 배열을 넣어주면 돼
• 아래처럼 수정하고 콘솔을 확인해보면 input의 내용이 변경돼도 다시 실행하지 않는것을 알 수 있어