react 16.8 ver 이후부터, useState 를 사용하여 클래스컴포넌트에서 state를 사용하는것처럼 사용할 수가 있다. 이 과정에서 Hooks 를 사용한다. Hooks 의 종류는 다양하지만, 가장 기본이 되는 useState 먼저 짚고 넘어가자 🐻

useState

• 배열 비구조화 할당

배열 비구조화 할당 은 객체 비구조화 할당 과 비슷하다. 즉 배열 안에 들어 있는 값을 쉽게 추출
하는 것이다.

ex) 😇

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

array 안에 있는 값을 one 과 two 에 담아 주는 코드이다. 위 코드는 배열 비구조화 할당을 하면 다음과 같이 표현 할 수있다.

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

• useState사용

import React, {useState} from 'react';

const Say = () => {
 const [message, setMessage] = useState('');
 const onClickEnter = () => setMessage('hello');
 const onClickLeave = () => setMessage('bye');
 
 return (
  <div>
   <button onClick={onClickEnter}> 입장 </button>
   <button onClick={onClickLeave}> 퇴장 </button>
   <h1> {message} </h1>
  </div>
 );
};

export default Say;

useState 함수의 인자에는 상태의 초깃값 을 넣어 준다. 클래스형 컴포넌트에서의 state 초깃값은 객체형태를 넣어주었는데 useState 에서는 반드시 객체가 아니어도 상관없고, 값의 형태는 자유롭게 숫자, 문자열, 객체, 배열 모두 가능하다.

🐻 함수를 호출하면 배열이 반환되는데, 배열의 첫번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수이다. 이 함수는 setter 함수라고 부른다. 그리고 배열 비구조화 할당을 통해 이름을 자유롭게 정해 줄 수 있다. 위에서는, message와 setMessage라고 이름을 설정해두었는데, text 와 setText라고 이름을 자유롭게 바꾸어도 상관없다.

한 컴포넌트에서 useState 여러 번 사용하기

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

import React, { useState } from 'react';

const Say = () => {
  const [ message, setMessage ] = useState ('');
  const onClickEnter = () => setMessage('hello');
  const onClickLeave = () => setMessage('bye');
  
  const [ color, setColor ] = useState ('black');
  
  
 return (
  <div> 
   <button onClick={onClickEnter}> 입장 </button>
   <button onClick={onClickLeave}> 퇴장 </button>
   <h1> {message} </h1>
   
   <button style= {{ color: 'red' }} onClick={() => setColor('red')}>
    빨강
   </button>
   
   <button style = {{ color : 'blue' }} onClick = {() => setColor('blue')}>
   파랑
  </button>
  
  <button style = {{ color: 'green' }} onClick = {() => setColor('green')}>
  초록
  </button>
  
 export default Say;