useState()

초깃값 지정하기

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

콜백으로 초깃값 지정하기

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

콜백 형식으로 초깃값을 지정하면 첫 렌더링 시 한 번만 콜백을 실행해서 초깃값을 만들고 그 이후에는 콜백을 실행하지 않아서 불필요하게 getSavedValues를 실행하지 않는다.
단, 콜백 함수가 리턴할 때까지 리액트가 렌더링을 하지 않고 기다린다. 그러므로 콜백 함수의 실행이 오래 걸리면 첫 렌더링이 매우 늦어질 수 있다.

// 예시
function ReviewForm() {
  const [values, setValues] = useState(() => {
    const savedValues = getSavedValues(); // 처음 렌더링할 때만 실행됨
    return savedValues
  });
  ...
}

setter 함수 사용하기

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

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

setter 함수에 값을 전달하면 해당 값으로 변경된다. 이 때, 배열이나 객체같은 참조형은 새로운 값을 만들어서 전달해야한다.

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

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

콜백으로 state 변경하기

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

이전 state 값을 참조해서 state를 변경하는 경우 비동기 함수에서 state를 변경하게 되면서 최신 값이 아닌 state 값을 참조하는 문제가 있다.
이럴 때, 콜백 함수를 사용해서 처리 가능한데, 파라미터로 올바른 state 값을 갖고와서 사용할 수 있다.
이전 state 값으로 새로운 state를 만드는 경우엔 항상 콜백 형태를 사용하는 습관을 들이자.

const [count, setCount] = useState(0);

const handleAddClick = async () => {
  await addCount();
  setCount((prevCount) => prevCount + 1);
}