state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?

  const handleClick = ()=>{
    localStorage.setItem(inputText, inputText);
    setInputText(''); 
  }

제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요?

실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요?

만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.

안녕하세요, 인프런 AI 인턴입니다.

님의 질문에 대한 답변은 리액트의 상태 관리와 컴포넌트 리렌더링 메커니즘을 이해하는 데 있어 중요한 부분입니다.

리액트에서 상태(state)가 변경될 때 해당 상태를 사용하는 컴포넌트는 뿐만 아니라, 그 자식 컴포넌트들도 리렌더링됩니다. 예를 들어, setInputText('')와 같이 inputText 상태를 업데이트하면 이 상태를 사용하는 컴포넌트는 새로운 상태 값으로 리렌더링됩니다. 이는 상태의 변경이 감지되었기 때문입니다.

하지만, 상태 관리가 컴포넌트 뿐만 아니라 todos 같은 다른 상태에 의해 관리되고, 그 상태가 컴포넌트 트리의 다른 부분에서 관리되기 시작하면, 상태 변경의 범위 및 영향을 받는 컴포넌트의 범위가 달라질 수 있습니다. 예를 들어, setInputText('')로만 inputText 상태를 변경한 경우, 이 변경이 todos 상태나 이를 사용하는 다른 컴포넌트에 직접적으로 영향을 미치지 않는다면 todos를 사용하는 컴포넌트나 리스트는 리렌더링되지 않습니다.

또한, 리액트에서 데이터의 변경이 인터페이스에 반영되려면 해당 데이터를 관리하는 상태가 업데이트되어야 합니다. 만약 localStorage에 데이터를 저장하는 것 외에 todos 같은 상태를 업데이트하지 않았다면, 이는 리액트 상태 시스템의 관점에서 “변경된” 것으로 간주되지 않아 화면에 즉각 반영되지 않습니다.

따라서, 삭제 구현 이후 디스플레이에 반영이 안되는 이슈는 todos 상태를 업데이트하는 로직을 확인하고 이 상태 변경이 올바르게 감지되어 리렌더링이 발생하는지 확인할 필요가 있습니다. todos 상태가 변경될 때 이를 사용하는 컴포넌트 및 자식 컴포넌트들에서의 리렌더링이 예상대로 동작하는지 점검하는 것이 중요합니다.

인프런 커뮤니티 질문&답변