전체 글

보통은 props를 통하여 부모 컴포넌트에서 자식 컴포넌트까지 정보를 전달할 거예요. 하지만 만약 props를 중간에 있는 많은 컴포넌트를 통해 전달한다면 또는 앱 안에 있는 여러 컴포넌트에 동일한 정보가 필요하다면 props를 전달하는 것은 너무 구구절절하고 불편해요. 컨텍스트는 명시적으로 props를 전달하지 않아도 부모 컴포넌트가 깊이 상관 없이 트리 안에 있는 어떤 컴포넌트에게 정보를 전달할 수 있도록 만들어줘요. 이 페이지에서는 - "props drilling"이 무엇인지 - 어떻게 반복적인 prop 전달을 컨텍스트로 대체할 수 있는지 - 컨텍스트의 일반적인 사용 사례 - 컨텍스트를 대체할 수 있는 일반적인 방법들 을 알아볼 거예요. The problem with passing props | p..

여러 이벤트 핸들러에 뿌려진 상태 업데이트가 많은 컴포넌트는 압도적이에요. 이러한 경우에는 모든 업데이트 로직을 컴포넌트 외부에 하나의 함수로 통합할 수 있는데 이를 리듀서라고 불러요. 이 페이지에서는 - 리듀서 함수가 무엇인지 - useState를 useReducer로 어떻게 리팩토링 하는지 - 리듀서를 언제 사용하는지 - 어떻게 써야 올바르게 쓰는지 를 알아볼 거예요. Consolidate state logic with a reducer | 리듀서로 상태 로직 합치기 컴포넌트가 복잡해질수록 컴포넌트의 상태가 업데이트되는 방법을 힐끗 봐서는 알 수가 없어요. 예를 들어 아래의 TaskApp 컴포넌트는 tasks의 배열을 상태로 가지고 있고 할 일의 추가, 삭제, 수정을 위한 3개의 서로 다른 이벤트 핸..

상태는 컴포넌트들에서 독립되어 있어요. 리액트는 어떤 상태가 어떤 컴포넌트에 들어가있는지를 UI 트리 내에서의 위치에 기반하여 추적해요. 여러분은 리렌더링 사이에서 언제 상태를 보존하고 언제 상태를 초기화 해야하는지를 통제할 수 있어요. 이 페이지에서는 - 리액트가 언제 상태를 보존하는지 혹은 언제 상태를 초기화하는지 - 리액트가 컴포넌트의 상태를 어떻게 강제로 초기화하는지 - 키와 타입이 상태가 보존되는데 어떤 영향을 미치는지 를 알아볼 거예요. State is tied to a position in the render tree | 상태는 렌더트리에서의 위치와 연결되어 있다 리액트는 UI에서 컴포넌트 구조로 렌더 트리를 만들어요. 컴포넌트의 상태를 만들 때, 상태는 컴포넌트 안에 "거주한다"라고 생각해..