[React] useState

이전 글에서 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하기 위해 사용하는 것이 props라는 것을 알았다.

 

전달받은 값을 사용하기 위해서는 새로운 문법인 UseState와 useEffect를 알아야 한다.

 

프로젝트하면서 useState와 useEffect 두 개의 Hook을 많이 사용한 것 같다.

 

useState란?

함수형 컴포넌트 내에서 상태 관리할 수 있게 해주는 함수이다.

import { useState } from 'react';

function Example() => {
	const [examData, setExamData] = useState();
}

export default Example;

사용할 때는, 위 코드처럼 사용하면 된다.

 

const [examData, setExamData] = useState();

이 코드를 보았을 때,

examData	examData의 값
setExamData	변화되는 값(이 값이 examData로 바뀜)
useState()	examData의 초기값

이렇게 구성이 되어있다.

 

만약, useState(0); 일 때는, examData는 0이 되고 사용자에게 입력 받은 값이 1이 된다면 setExamData는 1이 되면서 examData 또한 1로 값이 바뀐다.