useState 직접 변경 오류

버튼을 클릭해도 화면에 아이템이 추가되지 않습니다. 버그를 찾으세요:

JSX

function TodoApp() {
  const [items, setItems] = useState(['할 일 1']);

  const addItem = () => {
    items.push('새 할 일');
    setItems(items);
  };

  return (
    <div>
      <button onClick={addItem}>추가</button>
      {items.map((item, i) => <p key={i}>{item}</p>)}
    </div>
  );
}

답변

map의 key로 index를 사용하면 렌더링이 안 됨 onClick에 함수 참조 대신 호출을 전달해야 함 useState의 초기값이 배열이면 안 됨 state 배열을 직접 변경(push)하면 React가 변경을 감지하지 못함

로그인 후 제출하기