useState 사용법

사용법

기본적으로 아래와 같이 사용하면되고 사용 시엔 불변성을 꼭 지켜줘야한다.

const [state, setState] = useState({
  title: '호롤롤로롤',
  content: '공백',
});

 

상태 값 변경은 setState를 사용하면 된다.

setState({
  ...state,
  content: 'ㅋㅋㅋㅋㅋㅋㅋ',
});

setState를 사용하지 않고 직접 값을 변경하게 되면 리액트가 render 함수를 호출하지 않아 상태가 변경되어도 렌더링 되지 않는다. 또한 리액트는 setState를 실행했을때 이전 값과 비교 후 리렌더링 여부를 판단하기 때문에 직접적으로 값을 변경해선 안된다.

참고

setState는 비동기적으로 동작한다.

const [counter, setCounter] = useState(0);

setCounter(counter + 1);
console.log(counter); // result: 0

useEffect(() => {
  console.log(counter); // result: 1
}, [counter]);

 

또한 같은 키를 가진 작업이 있을경우 하나로 합쳐서 마지막에 있는 내용만 처리한다.

setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 5);
// result: 5

 

updater에 인자값은 항상 최신 값으로 유지되기 때문에 최신 값이 필요하거나 순차 실행이 필요할 땐 setState에 updater함수를 전달해서 사용한다.

setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 5);
// result: 7

updater 사용 시 리액트는 해당 작업들을 하나로 합치는게 아닌 큐에 각각 하나씩 넣고 처리한다.