[React] 배열 비구조화 할당&함수형 컴포넌트에서 useState 사용하기

16.8 이후부터는 useState 함수를 사용해 함수형 컴포넌트에서도 state를 사용할 수 있게 됨! 이 과정에서 Hooks라는 것을 사용함. Hooks를 사용하기 전에 배열 비구조화 할당부터 알아보자.

배열 비구조화 할당이란, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법으로 이전에 공부한 객체 비구조화 할당과 비슷함.

• 예시
  array 안에 있는 값을 one과 two에 담아 주는 코드

const array = [1, 2];
const one = array[0];
const two = array[1];

배열 비구조화 할당을 사용하면?

const array = [1, 2];
const [one, two] = array;

👉 useState 사용하기

useState 함수의 인자에는 상태의 초깃값을 넣어준다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어줘야 하는데, useState에서는 반드시 객체가 아니어도 상관없다. 값의 형태는 자유라서 숫자일 수도, 문자열일 수도, 객체일 수도, 배열일 수도 있음.

• Say.jsx

import React, { useState } from 'react';
 
const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');
 
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};
 
export default Say;

• App.jsx

import React from 'react';
import Say from './features/3_Component/Say';

const App = () => {
  return <Say />;
};

export default App;

(+) 한 컴포넌트에서 useState 여러 번 사용하려면?

useState는 한 컴포넌트에서 여러 번 사용해도 상관없음. 또 다른 상태를 useState로 한번 관리해보자.

• Say.jsx

import React, { useState } from 'react';
 
const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');
 
  const [color, setColor] = useState('black');
 
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </div>
  );
};