coding develop

useState 를 사용하기에 앞서 

많이 활용하고 있는 

배열 비구조화 할당 에 대해 살펴보자

function App() {
  const array = [10,20];
  const one = array[0];
  const two = array[1];

  return (
    <div className="App">
       <h1>{one}</h1>    {/* 10 */}
      <h1>{two}</h1>    {/* 20 */}
    </div>
  );
}

export default App;

array 안에 있는 값을 one과 two에 담아 주는 코드이다.

위 코드에 배열 구조화 할당을 사용하면 다음과 같이 표현 할 수 있다.

function App() {
  const array = [10,20];
  const [one , two] = array;

  return (
    <div className="App">
       <h1>{one}</h1>    {/* 10 */}
      <h1>{two}</h1>    {/* 20 */}
    </div>
  );
}

export default App;

배열 비구조화 할당 문법을 사용하면 useState 사용 방법을 쉽게 이해 할 수 있다.

useState 사용하기

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;

useState 함수의 인자에는 상태의 초깃값을 넣어준다.

원래는 다음과 같이 

const messageState = useState('');
const message = messageState[0];
const setMessage = messageState[1];

위에서 언급한 배열 비구조화 할당을 통해 각 원소를 추출하였다.

또한 ,

클래스 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 하는데

useState에서는 반드시 객체가 아니어도 상관 없다.

값의 형태는 자유다. 숫자, 문자열, 객체, 배열 등등

함수를 호출하면 배열이 반환 되는데 

배열의 첫번째 요소는 현재 상태이고,

두번째 요소는 상태를 바꾸어 주는 함수이다. 

(이 함수를 setter 함수라고 부른다)

const [message , setMessage] = useState('');

message -> 현재상태

setMessage -> 상태를 바꾸어 주는 함수 

useState 여러 번 사용하기

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 onClick={ () => setColor('red')}>빨간색</button>
            <button onClick={ () => setColor('green')}>초록색</button>
            <button onClick={ () => setColor('blue')}>파란색</button>
        </div>
    );
};