function App() {
// 1.
// App 함수가 재실행 된다면, 그 안의 useState 역시 계속 실행된다는 것인데
// 이것이 상태 초기화를 의미하는 것은 아닐까 하는 의문점이 들 수 있다.
// useState는 `React`가 제공하며, React는 상태를 관리하고, 컴포넌트간 연결을 관리한다.
// 그리고 이 관리 Process의 일부로 React는 useState와 전달된 기본값(useState())에 대해서는
// 한 번만 고려되도록 처리한다.
// 컴포넌트가 처음 렌더링될때, 즉 App 컴포넌트가 최초 실행될 때다.
// useState가 실행되면 리액트가 관리하는 새로운 상태 변수를 만들게 된다.
// 그리고 'React'는 이 변수가 어느 컴포넌트에 속하는지를 기억하고 기본값을 사용해서 상태값을 초기화한다.
// 이후 App 컴포넌트 함수를 호출하여 재평가하는 과정에서 useState가 호출되면 새로운 상태는 생성되지 않는다.
// React는 App 컴포넌트에 대한 상태가 이미 존재함을 깨닫고, 필요한 경우에만(변경되는 경우) 상태를 업데이트 한다.
// 중요한 점은 'React'는 state의 관리와 갱신만을 담당하는 것이다.
// 컴포넌트가 DOM에서 완전히 삭제되지 않는 이상, 상태의 초기화는 이루어지지 않는다.
// DOM에 컴포넌트가 연결되고 유지되는 동안에는 state는 최초의 초기화 이후에는 갱신만 하게 된다.
// useReducer의 경우도 마찬가지다.
const [showParagraph, setShowParagraph] = useState(false);
const [allowToggle, setAllowToggle] = useState(false);
console.log('App Running');
const toggleParagraphHandler = useCallback(() => {
if(allowToggle){
setShowParagraph(prev => !prev);
}
},[allowToggle]);
const allowToggleHandler = () => {
setAllowToggle(true)
}
return (
<div className="app">
<h1>Hi there!</h1>
<DemoOutput show={showParagraph}/>
<Button onClick={allowToggleHandler}>Allowed Toggling</Button>
<Button onClick={toggleParagraphHandler}>Toggle Paragraph</Button>
</div>
);
}
// 2.
// React는 state에 대한 갱신을 어떻게 진행하는가?
// 컴포넌트 내에서는 useState를 통해 일부 state를 관리한다.
// useState는 'React'로부터 왔기 때문에, 'React'가 state를 관리한다.
// 버튼을 누를 때 setState를 통해 상태를 변경되는 컴포넌트가 있다고 가정해보자.
// setState를 통해 해당 state의 값을 변경하여도, state에 바로 변경되지 않는다.
// 다시 말하자면 setState가 실행이 끝나도, 그존 값이 즉각적으로 바뀌지 않는다는 것이다.
// 대신 setState를 호출하고, 새로운 data로 state가 변경되도록 (state가 update 되도록) 예약한다
// 이것이 상태 갱신 예약이다.
// 'React'는 해당 state의 갱신 예약을 인지하고, 처리할 계획을 준비하지만 바로 처리하지는 않는다.
// 'React'는 우선 순위에 따라 움직인다.
// 사용자 입력에 응답하는 것이, 화면의 문자를 변경하는 것보다 더 우선 순위가 높을 것이다.
// 이러한 우선 순위를 통해 React는 상태 갱신을 연기할 수 있다.
// 우선 순위를 통한 react의 scaduling 때문에 다수의 예약 상태 변화가 동시에 있을 수 있다.
// 즉 동시에 여러 번의 갱신이 예약될 수 있으므로 상태를 갱신할 때에는 함수 형태를 이용해서 갱신하는 것을 추천한다.
// 함수 형태: setState(prev => some statement)
// 특히 이전 상태의 snapshot에 의존해야 한다면 더욱 함수를 사용하여야 한다.
// 물론 이 모든 과정이 굉장히 빠르게 처리 되기 때문에 잠깐의 지연조차 느끼지 못하겠지만,
// 이론상으로 scaduling은 지연될 수 있으므로 state 변경이 순서대로 처리되고, 이전 state를 기반으로
// state 변경이 발생할 때마다 가장 최신의 state를 얻을 수 있게 해주는 안전한 방법이다.
// 함수 형태를 사용해야 React가 미완료된 상태 변경 작업에 최신의 상태를 사용하고
// 컴포넌트가 재 랜더링되었을 그 시점의 상태를 사용하지 않게 된다.
// 컴포넌트가 재평가 되면서 미완료된 상태 변경 작업이 여러개 있을 수 있다.
// useEffect 내부에서, 이메일과 비밀번호의 유효 상태를 통해 폼의 유효성을 업데이트하는게 안전하다고 말한 적이 있다.
// 이전 상태의 snapshot을 기반으로 상태를 갱신하기 위해 함수 형식을 사용하는 것과 비슷하게,
// useEffect는 상태 또는 종속된 값이 변경될 때마다 의존성 메커니즘을 통해 내부에서 선언한 Effet가 재실행되게끔 만든다.
// 따라서 컴포넌트 함수가 재실행되고, 매번 Effect가 다시 실행되기 때문에
// 미완료된 상태 변경 작업이 빠짐 없이 실행된다.
// 실제로 Effect는 이 이후에 실행되므로 이런 작업을 수행할 때마다 가장 최신의 결과를 얻을 수 있다.
// 이 상태 갱신 scaduling은 꼭 기억해야 할 메카니즘이다.
// 단순히 이것을 통해 무언가를 할 수 있을 것보다는, 데이터 없이 작업할 때 발생할 수 있는
// 잠재적인 위험을 배제하기 위함이다.
export default App;