상태로부터 화면을 계산하는 선언적 UI 모델을 이해합니다.
컴포넌트는 현재 props와 state를 입력으로 JSX를 반환합니다. DOM 수정 명령을 나열하기보다 상태가 뜻하는 화면을 선언하면 React가 변경을 반영합니다.
렌더 함수는 같은 입력에 같은 JSX를 반환하도록 순수하게 유지하고 네트워크 요청과 저장소 변경은 이벤트 또는 Effect 경계에 둡니다.
개발 모드 StrictMode의 추가 실행에서도 문제가 없도록 렌더 중 외부 값을 변경하지 않습니다.
렌더링 중 배열을 수정하거나 fetch를 호출하면 재렌더마다 부수 효과가 반복됩니다.
로컬 프로젝트에서 확인해보세요loggedIn을 false로 바꿔 화면이 데이터에서 다시 계산되는지 확인하세요.
const session = { loggedIn: true, name: "민수" };
export default function App() {
return (
<main>
<h1>
{session.loggedIn ? session.name + "님, 반갑습니다" : "로그인이 필요합니다"}
</h1>
<p>화면은 현재 데이터의 함수입니다.</p>
</main>
);
}