Context로 데이터 깊숙이 전달하기 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 data를 전달한다. 그러나 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트가 동일한 정보를 필요로 하는 경우 props를 전달하면 장항하고 불편해질 수 있다. Context를 사용하면 부모 컴포넌트가 깊이와 무관하게 하위의 모든 컴포넌트에서 data를 사용할 수 있다. 학습 내용 “Prop drilling”이란 무엇인가 반복적인 prop 전달을 Context로 대체하는 방법 Context의 일반적인 사용 사례 Context에 대한 일반적인 대안 Passing props의 문제 Passing Props(props 전달): UI 트리를 통해 데이터를 컴포넌트에 명시적으로 연결할 수 있는 좋은 방법..
44장 REST API REST란? REpresentational State Transfer의 약자 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 펄딩의 2000년 논문에서 처음 소개되었음 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 소개되었다. RESTful REST의 기본 원칙을 성실히 지킨 "서비스 디자인"을 RESTful하다고 표현한다. REST 아키텍처 스타일을 따르고 있는 것을 나타내는 형용사. 차이점 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것. 설계된..
state 보존 및 재설정 state는 컴포넌트 간에 격리된다. React는 UI 트리에서 어떤 컴포넌트가 어떤 state에 속하는지를 추적한다. React는 state를 언제 보존하고 언제 초기화할지를 제어할 수 있다. 학습 내용 React가 컴포넌트 구조를 “보는” 방법 React가 state를 유지하거나 재설정하도록 선택할 때 React가 컴포넌트의 state를 재설정하도록 강제하는 방법 key와 type이 state 보존 여부에 영향을 미치는 방법 UI 트리 브라우저는 UI를 모델링하기 위해 "여러 트리 구조"를 사용한다. DOM은 HTML element CSSOM은 CSS Accessibility 트리도 있다! => 이처럼, React도 트리 구조를 사용하여 사용자의 UI를 관리하고 모델링한다!..
State 구조 선택 state를 잘 구조화(structuring)하면 수정과 디버깅이 편한 컴포넌트를 만들 수 있다. 이번 장에서는 state를 구조화할 때 고려해야 할 몇 가지 팁에 대해 알아볼 것이다. 학습 내용 단일 state 변수를 사용해야 하는 경우 vs. 다중 state 변수를 사용해야 하는 경우 state 정리시 피해야 할 사항 state 구조와 관련된 일반적인 문제를 해결하는 방법 Principles for structuring state state 구조화 원칙 state를 보유한 컴포넌트를 작성할 때는 선택을 해야 한다. 얼마나 많은 state 변수를 사용할지 데이터의 모양은 어떻게 할지 등등 최적화되지 state 구조를 사용해도 문제는 없지만, 더 나은 선택을 위한 몇 가지 원칙이 있..
스냅샷으로서의 state state 변수는 일반 JavaScript 변수처럼 보이지만 실제로는 스냅샷처럼 동작한다. state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다. 학습 내용 state 설정으로 리렌더링이 촉발되는 방식 state 업데이트 시기 및 방법 state를 설정한 직후에 state가 업데이트되지 않는 이유 이벤트 핸들러가 state의 ‘스냅샷’에 액세스하는 방법 Setting state triggers renders state를 설정하면 렌더링이 촉발된다. 인터페이스가 이벤트에 반응하려면 state를 업데이트해야 한다. 즉, state 변수에 대한 set(설정자) 함수를 호출하면 렌더링이 촉발된다. set(설정자) 함수로 state 변수 ..
