[React] 함수형 컴포넌트에서 state사용하기

함수형 컴포넌트에서는 state를 사용할 때 useState라는 함수를 사용한다.

배열 비구조화 할당

• 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법

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

useState 사용하기

import React, {useState} from 'react'

const Say = () => {
    //useState의 초깃값은 반드시 객체 형태일 필요는 없다
  	//함수를 호출하면 배열이 반환되는데,
  	//배열의 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꾸어주는 함수
  	//이 함수를 Setter함수라고 부른다. 
  	//배열 비구조화 할당을 통해 이름을 자유롭게 정해줄 수 있다. 
    const [num, changeNum] = useState(1);

    const onClickEnter = () => changeNum(num+1);
    const onClickLeave = () => changeNum(num-1);

    return (
        <div>
            <button onClick={onClickEnter}>Increase</button>
            <button onClick={onClickLeave}>Decrease</button>
            <h1>{num}</h1>
        </div>
    );
};

export default Say;

• 해당 컴포넌트를 App.js에서 불러오는 부분은 앞의 포스트에서와 다른 부분이 없으니 앞으로의 포스트에서는 특별히 다른점이 없다면 생략한다.

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

• useState는 한 컴포넌트에서 여러 번 사용해도 상관없다.

import React, {useState} from 'react'

const Say = () => {
    //useState의 초깃값은 반드시 객체 형태일 필요는 없다
  	//함수를 호출하면 배열이 반환되는데,
  	//배열의 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꾸어주는 함수
  	//이 함수를 Setter함수라고 부른다. 
  	//배열 비구조화 할당을 통해 이름을 자유롭게 정해줄 수 있다. 
    const [num, changeNum] = useState(1);
    const [color, setColor] = useState('black');
    const onClickEnter = () => changeNum(num+1);
    const onClickLeave = () => changeNum(num-1);

    return (
        <div>
            <button onClick={onClickEnter}>Increase</button>
            <button onClick={onClickLeave}>Decrease</button>
            <h1 style= {{color}}>{num}</h1>
			//setColor를 여러번 사용한다. 
            <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>
    );
};

export default Say;