State 및 배열 비구조화 할당

배열의 비구조화 할당

Hooks를 사용하기 전에 배열 비구조화 할당이라는 것을 알아야하는데, 배열 비구조화 할당은 객체 비구조화 할당과 비슷합니다.

즉, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법입니다.

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

useState를 사용해보도록 하겠습니다. useState 사용방법을 쉽게 이해할 수 있습니다.

import React, { useState } from "react";

const Say = () =>{ //Say라는 함수형 컴포넌트를 만들었다
 const [message, setMessage] = useState(''); //빈문자열을 useState를 받아왔다.
 const onClickEnter = () => setMessage('안녕하세요!'); //onClickEnter라는 함수를 실행하면 빈문자열이 안녕하세요!로바뀐다
 const onClickLeave = () => setMessage('안녕히 가세요!'); //onClickLeave라는 함수를 실행하면, 안녕히가세요라는 문자열이 나온다
  
  return(
    <div>
      <button onClick={onClickEnter}>입장</button> //button태그 안에 onClick을 넣어 함수를 실행해주었다.
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );

};

export default Say;

입장 퇴장 버튼이 있다

입장을 누르니 안녕하세요!

퇴장을 누르니 안녕히 가세요가 나온다.

여기서 주의 할점은 state를 변화시키고 싶으면
const [message, setMessage] = useState('');
에서 message를 사용하는 것이 아니라 setMessage를 사용해야한다