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를 사용해야한다