리액트 useState

useState 정리

초깃값 지정하기

const [state, setState] = useState(initialState);

useState 함수에 값을 전달하면 초깃값으로 지정할 수 있다.

콜백으로 초깃값 지정하기

const [state, setState] = useState(() => {
  // 초기값을 계산
  return initialState;
});

콜백 함수의 실행이 오래 걸릴 수록 초기 렌더링이 늦어진다는 점에 주의

Setter 함수 사용하기

const [state, setState] = useState(0);

const handleAddClick = () => {
  setState(state + 1);
}

배열이나 객체 같은 참조형은 반드시 새로운 값을 만들어서 전달해야 한다

참조형 State 사용의 잘못된 예

const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  state.count += 1; // 참조형 변수의 프로퍼티를 수정
  setState(state); // 참조형이기 때문에 변수의 값(레퍼런스)는 변하지 않음
}

참조형 State 사용의 올바른 예

const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  setState({ ...state, count: state.count + 1 }); // 새로운 객체 생성
}

콜백으로 State 변경

setState((prevState) => {
  // 다음 State 값을 계산
  return nextState;
});

비동기 함수에서 State를 변경하게 되면 최신 값이 아닌 State 값을 참조하는 문제가 있다
이럴 때는 콜백을 사용해서 처리할 수 있었는데 파라미터로 올바른 State 값을 가져와서 사용할 수 있다.

참고
코드잇