useState 사용 방법

useState는 상태를 정의하고, 이 상태를 관리해주는 훅이다.

P1. useState

1. useState

• useState 인수로는 사용할 state의 초깃값을 넘겨준다.
• 아무런 값을 넘겨주지 않으면 초깃값은 undefined 이다.
• useState 반환 값은 배열이며, 첫 번째 원소로 state 값 자체를 사용할 수 있다.
• 두 번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.

2. Code

import { useState } from 'react';

function Test() {
  const [state, setState] = useState('Hello');

  function handleClick() {
    setState('안녕');
  }

  return (
    <div>
      <h1>Use State</h1>
      <h2>{state}</h2>
      <button onClick={handleClick}>한글</button>
    </div>
  );
}

export default Test;

P2. useState 사용 방법

1. useState 사용 방법

• 리액트에서 렌더링은 함수형 컴포넌트의 return 함수를 실행한 다음, 해당 실행 결과물을 이전의 리액트 트리와 비교한다.
• 비교하는 과정에서 리-렌더링이 필요한 부분만 업데이트가 발생한다.
• 따라서, useState 반환 값의 두번째 원소인 setState함수를 사용하여 state 값을 변경하는 경우 리-렌더링이 발생하게 된다.

2. 예시

• 다음의 예시를 통해, 함수형 컴포넌트의 return 문을 통해 반환된 결과물을 가지고 서로 비교하여, Re-Render Process가 발생하는 것을 알 수 있다.

(1) Re-Rendering ( No )

function Test() {
  let state = 'Hello';

  function handleBtnClick() {
    console.log('Click Event');
    state = '안녕';
    
  }

  return (
    <div>
      <h1>Use State</h1>
      <h2>{state}</h2>
      <button onClick={handleBtnClick}>한글</button>
      {console.log('return - state:', state)}
    </div>
  );
}

export default Test;

( "한글" 버튼을 아무리 클릭해도, return 문의 {state} 값은 초기화 값 "Hello" 이다. )

(2) Re-Rendering ( Yes )

import { useState } from 'react';

function Test() {
  const [state, setState] = useState('Hello');

  function handleBtnClick() {
    console.log('Click Event');
    setState('안녕');
  }

  return (
    <div>
      <h1>Use State</h1>
      <h2>{state}</h2>
      <button onClick={handleBtnClick}>한글</button>
      {console.log('return - state:', state)}
    </div>
  );
}

export default Test;

( "한글" 버튼을 클릭하면, state 값이 변경되어 리-렌더링 된다. )

P3. useState 사용 방법(2) - 객체

1. Object 업데이트 방법

• JavaScript number, string 등의 원시타입은 불변성(immutable)을 갖기 때문에, setState 함수를 호출하여, 해당 값(value)을 업데이트하면 된다.
• 반면, JavaScirpt Object 타입은 가변성(mutable)을 갖는다고 할지라도, 원시타입과 같이 불변성(immutable)을 갖고 있다고 취급해야 한다.
• 즉, 객체의 값을 바꾸려(mutable)하지 말고 교체(replace)를 해야 React는 state가 변경된 것을 인식하고 Re-Rendering 된다.

2. Example

(1) Mutable ( Wrong Example )

import { useState } from 'react';

function Test() {
  const [state, setState] = useState({ name: 'Han', greeting: 'Hello' });

  function handleBtnClick() {
    console.log('Click Event');
    setState((state.greeting = '안녕'));
  }

  return (
    <div>
      <h1>Use State</h1>
      <h2>
        {state.greeting} {state.name}
      </h2>
      <button onClick={handleBtnClick}>한글</button>
      {console.log(state)}
    </div>
  );
}

export default Test;

(2) Im-Mutable ( Right Example )

import { useState } from 'react';

function Test() {
  const [state, setState] = useState({ name: 'Han', greeting: 'Hello' });

  function handleBtnClick() {
    console.log('Click Event');
    setState({...state, greeting: "안녕"});
  }

  return (
    <div>
      <h1>Use State</h1>
      <h2>
        {state.greeting} {state.name}
      </h2>
      <button onClick={handleBtnClick}>한글</button>
      {console.log(state)}
    </div>
  );
}

export default Test;