# 167 [udemy React 완벽 가이드 노트] useState의 재실행은 상태 초기화가 되는가? ( 답 : 아니오)

State와 Component의 상호작용은 리액트의 핵심 개념이다. 

리액트가 이 두가지를 모두 관리하고 있다. 

 

useState가 한 예다. 이런 방식으로 상호작용을 처리한다. 

 

 

일반적 형태의 상태관리 : useState

---

새로운 state를 만들어서 

useState를 호출한 컴포넌트에 state를 연결할 수 있다. 

 

useState를 호출하면 리액트는 백그라운드에서 이를 관리하고 

컴포넌트와 새로운 state변수를 묶어준다. 

 

useState를 호출할 때 컴포넌트 내의 함수가 재실행 되는 것은 이상하다. 

state에 어떤 손실이 있거나 상태 초기화가 일어나는 것 같지 않기 때문이다.

 

 

그 이유는 : 

useState는 리액트가 제공하는 것이며, 

리액트는 상태를 관리하고 컴포넌트와의 연결을 관리하므로 

이 관리 프로세스의 일부로 

리액트는 useState와 그 전달된 defaultValue는 한번만 고려된다.

 

 

예시:

function App() {
  const [showParagraph, setShowParagraph] = useState(false);
  const [allowToggle, setAllowToggle] = useState(false);

  console.log("APP RUNNING");

  const toggleParagraphHandler = useCallback(() => {
    if (allowToggle) {
      setShowParagraph(prevShowParagraph => !prevShowParagraph);
    }
  }, []);

  const allowToggleHandler = () => {
    setAllowToggle(true);
  };

  return (
    <div className="app">
      <h1>Hi there!</h1>
      <DemoOutput show={showParagraph} />
      <Button onClick={allowToggleHandler}>AllowToggling</Button>
      <Button onClick={allowParagraphHandler}>Toggle Paragraph!</Button>
    </div>
  );
}

맨처음 컴포넌트가 실행될 때, 여기서는 App 컴포넌트가 실행되어 useState가 실행될 때

리액트에 의해 관리되는 새로운 state 변수를 만들어 전달한다. 

 

이 변수가 어느 컴포넌트에 속하는지 리액트는 기억하게 된다. 

위의 예시에서는 App 컴포넌트이다. 

그리고 defaultValue를 사용해 초기화한다. 

 

이후 App 함수를 호출 때(App 컴포넌트 재평가 시)

useState가 호출되면 

새로운 state가 생성되지 않는다. 

그대신 리액트는 여기에 state가 존재함을 깨닫고 

필요할 경우 state를 업데이트만 한다. (App 함수가 재실행 되고 몇몇 state가 변경될 수 있기 때문)

 

리액트는 state관리와 업데이트만 관리한다. 

컴포넌트가 DOM에서 삭제되지 않는 이상 state 초기화는 이루어지지 않는다. 

예시에서 App 컴포넌트는 루트 컴포넌트이기 때문에 삭제되지 않을 것이다. 

 

 

자식 컴포넌트일 때 조건에 따라 렌더링 되었을 때

(컴포넌트가 삭제가 되었고 다시 연결 되었다면 )

state가 초기화 될 수는 있다. 

 

DOM에 컴포넌트가 연결되고 유지되는 한

state 최초 초기화 이후에는 업데이트만 된다.