스냅샷으로서의 state state 변수는 일반 JavaScript 변수처럼 보이지만 실제로는 스냅샷처럼 동작한다. state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다. 학습 내용 state 설정으로 리렌더링이 촉발되는 방식 state 업데이트 시기 및 방법 state를 설정한 직후에 state가 업데이트되지 않는 이유 이벤트 핸들러가 state의 ‘스냅샷’에 액세스하는 방법 Setting state triggers renders state를 설정하면 렌더링이 촉발된다. 인터페이스가 이벤트에 반응하려면 state를 업데이트해야 한다. 즉, state 변수에 대한 set(설정자) 함수를 호출하면 렌더링이 촉발된다. set(설정자) 함수로 state 변수 ..
렌더링하고 커밋하기 컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야 한다. 해당 과정의 단계를 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 React 렌더링 동작에 관해 설명하는데 도움이 된다. 학습 내용 React에서 렌더링의 의미 React가 컴포넌트를 언제, 왜 렌더링 하는지 화면에 컴포넌트를 표시하는 단계 렌더링이 항상 DOM 업데이트를 하지 않는 이유 UI를 요청하고 제공하는 단계 렌더링 촉발(Triggering) 컴포넌트 렌더링(Rendering) DOM에 커밋(Committing) Step 1: Tregger a render 컴포넌트 렌더링이 일어나는 두 가지 이유가 있다. 컴포넌트의 첫 렌더링인 경우 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우 첫 ..
state로 입력에 반응하기 React는 UI를 조작하는 선언적인 방법을 제공한다. UI를 개별적으로 직접 조작하는 대신 컴포넌트의 상태를 정의하고, 사용자 입력에 반응하여 각 상태들 사이를 전환하도록 한다. 학습 내용 선언형 UI 프로그래밍과 명령형 UI 프로그래밍의 차이점 컴포넌트가 있을 수 있는 다양한 시각적 state를 열거하는 방법 코드에서 다른 시각적 state 간의 변경을 촉발하는 방법 선언형 UI와 명령형 UI의 차이점 선언형 UI와 명령형 UI는 사용자 인터페이스를 구성하고 관리하는 두 가지 다른 접근 방식이다. 선언형 UI 작동 방식: 상태에 따라 UI가 어떻게 보여야 하는지 선언한다. 직접 UI를 조작하지 않는다. 대신 표시할 내용을 알려주면 React가 UI를 업데이트할 방법을 알아..
객체 state 업데이트 학습 내용 React state에서 객체를 올바르게 업데이트하는 방법 중첩된 객체를 변이하지 않고 업데이트하는 방법 불변성이란 무엇이며, 불변성을 깨뜨리지 않는 방법 Immer로 객체 복사를 덜 반복적으로 만드는 방법 변이(mutation)란 무엇인가? mutation: 변이 JavaScript에서 숫자/문자열/불리언은 원시(primitive) 타입이므로 변이할 수 없는(불변) "읽기 전용"이다. 그러나, 객체(Object) 자체의 내용을 변경하는 것은 가능하다. const [position, setPosition] = useState({ x: 0, y: 0}); position.x = 5; // mutation, 리렌더링X React에서 객체 state는 기술적으로는 변이할 수..
14장 전역 변수의 문제점 변수의 생명 주기 변수는 생물처럼 생성되고 소멸되는 생명 주기(Life Cycle) 을 가진다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. function foo() { var x = 'local'; console.log(x); // local return ; } foo(); console.log(x); // ReferenceError: x is not defined 지역 변수는 foo 함수 내의 변수 선언문이 호출되기 이전까지는 생성되지 않는다. 4.4절에서 보았듯이, 변수 선언은 선언문이 어디에 있..
