React Hooks - useState

State : 컴포넌트의 상태

useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해 준다,

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

state의 생성과 동시에 가져야 할 초기 값을 useState의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다.

현재 상태 값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때에는 setState를 이용해서 간편하게 변경시켜줄 수 있다.

state와 setState의 이름은 변경할 수 있다.

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

state를 변경할 때 새로 변경될 state 값이 이전 state 값과 연관이 되어 있다면 setState의 인자로 새로운 state를 리턴하는 콜백 함수를 넣어주는 게 좋다.

useState를 사용해서 초기 값을 받아올 때 무거운 일을 해야한다면 useState의 인자로 콜백 함수를 넣어주면 맨 처음 랜더링이 될 때만 실행될 수 있게 해준다.