[React Hooks] useState 사용법

렌더링 시점

setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링

 

기본 사용법

const [state, setState] = useState(초기값);

• state : 현재 상태값이 들어가 있는 변수
• setState : state 를 변경 시켜줄때 사용

const [time, setTime] = useState(10);

time = 10 // 초기값
setTime(15); // time 값을 15로 변경

 

기타 사용법

setState 함수의 인자에 콜백함수 사용

setState((prevState) => {
	return()
});

setState 함수의 인자에 콜백함수를 넣어주게 되면

1. 콜백함수의 인자는 이전 상태값을 가지게 된다.

2. 콜백함수의 return 값에는 새로운 state를 지정할 수 있다.

 

콜백 형식의 useState 초기값 지정

useState(() => {
	return()
});

useState를 콜백 형식으로 초기값을 지정하면 첫 렌더링 시에만 한 번 콜백을 실행해서 초기값을 만들고, 그 이후에는 콜백함수를 실행하지 않는다.

따라서 useState 초기값 지정시 오래걸리는 작업이 있을때 사용해주면 좋다.

단, 콜백 함수가 리턴할 때까지 React가 렌더링을 하지 않고 기다리게 된다.