useState

리액트로 개발할 때 함수형 컴포넌트를 사용한다면 react hook이라는 편리한 기능을 사용할 수 있다

 

State

컴포넌트가 갖을 수 있는 상태

예) 시계라는 컴포넌트에서 시간이라는 State를 가질수 있음

 

useState는 컴포넌트의 state를 간편하게 생성하고 업데이트 시킬 수 있게 해주는 도구

 

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

먼저 스테이트의 생성과 동시에 가져야 할 초기값을 useState 함수에 인자로 넣어주면 state와 setState의 두가지 요소를 배열 형태로 리턴해줍니다.

state = 현재의 상태값

변경해야 할 값은 setState함수를 이용하면 변경

예) const [ time, setTime ] = useState(5);

state:

time = 1

setTime(2);

 

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

 

초기값으로 무거운 함수가 사용된다면 state값이 변경될때마다 무거운 함수가 재랜더링이 되므로 성능이슈가 발생하게 된다. 이것 방지하기 위해 콜백함수를 이용하면 해결이 된다. 

 

콜백함수 : 파라미터로 함수를 전달하는 함수
파라미터로 함수를 전달 받아, 함수의 내부에서 실행하는 함수