useState

useState는 state의 상태를 변경하는 리액트 라이브러리의 훅으로 리액트의 훅들 중 가장 기본적이고 가장 많이 사용하는 훅이다.

기본 구조

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

state는 가변적인 값으로써 state의 상태를 변경하기 위해서는 결코 state를 직접 변경하지 않는다. 선언한 setState함수에 전달 인자를 넣어줌으로서 상태를 변경할 수 있다.

state+=1 // X

setState(state +1) // O

useState를 사용하는 이유

• 성능 최적화 : React의 가상 돔에서 가변적인 데이터의 상태 변화에 있어서 불필요한 다른 렌더링을 방지해준다.

• 상태 관리 : 복잡한 상태관리를 처리를 보다 간편하고 명시적으로 처리해준다.

state props 전달

state를 props를 통해 하위 컴포넌트로 전달할 수 있다.

기본적인 상식으로는 하위 컴포넌트로 props를 전달하는 방식은 당방향 데이터 전달이기에 자식 요소가 부모 요소의 상태에 영향을 끼칠 수 없다.

하지만 state는 다르다.
props에 state뿐만 아니라 setState함수 또한 같이 전달해줄 경우 자식 요소에서 부모 요소의 state를 변경할 수 있게 된다.

state가 복잡하지 않은 경우에는 유용하게 사용할 수 있다.

const [open,setOpen] = setState(false)
...
<Child setOpen={setOpen}/>

  // =========================

const Child = (props) => {
	const close = () => {
		props.setOpen(false)
	}
	...
	<button onClick={() => close()}/>
}