React Hook 정리 - useState

import { useState } from 'react';
const [state, setState] = useState('초기값');

setState를 사용하여 state를 변경하면 화면은 재렌더링됨.

초기값은 무엇이든지 올 수 있음 (오브젝트 등도 가능)

 

예제) 배열을 상태로 했을때 배열 업데이트

const [color, setColors] = useState(['Red', 'Green']);
const [input, setInput] = useState('');

// color를 추가하기 위해 input에 입력
const handleInputChange = (e) => {
	setInput(e.target.value);
};

// 입력 후 추가를 했을 때 동작
const handleAdd = () => {
	// 콜백을 사용
    setColors((prevState) => {
    	return [input, ...prevState];
    });
};

위 코드에서 change 또는 add 할때 마다 렌더링되는데 초기값을 설정할 때 만약 부하가 심한 작업을 초기에 하고 있었다면 랜더링을 할 때마다 이 작업을 실행하여 퍼포먼스가 낮아지게 된다. 이럴 때는 콜백함수를 인자로 받아오면 초기 한번만 실행하게 된다.

// 직접 값을 받아 사용
const [color, setColors] = useState(waitColor());

// 콜백 형태로 원하는 값을 리턴받아 사용
const [color, setColors] = useState(()=> {
	return waitColor();
});