<div id="readability-page-1" class="page"><div tabindex="-1" id="___gatsby"><main><div itemscope="" itemtype="http://schema.org/BlogPosting"><section><main><article><div id="post-content" itemprop="articleBody"><p>마침내 2편 내용을 정리할 시간이다.</p>
<p>1장. 컨택스트</p>
<ul>
<li>프롭 드릴링 현상을 리액트 컨택스트로 해결</li>
<li>MyReact로 컨택스트 직접 구현</li>
<li>이벤트 에미터 패턴으로 멀리 떨어진 객체간에 메세지 교류</li>
<li>createContext로 이벤트 에미터를 사용한 리액트 컨택스트 객체 생성</li>
<li>공급자, 소비자 컴포넌로 리액트 컴포넌트에서 사용</li>
</ul>
<p>2장. 라우터 1</p>
<ul>
<li>리액트 컨택스트를 활용 첫 번째</li>
<li>라우팅 개념</li>
<li>Router: 라우트 상태를 저장하기 위해 리액트 컨택스트를 만들고 여기에 데이터를 제공</li>
<li>Link: 브라우져의 하이퍼링크 기본동작을 막고 요청 주소에 따라 컨택스트의 상태를 변경</li>
<li>Routes: 상태에 따라 해당 리액트 앨리먼트를 찾아 렌더</li>
<li>Route: 요청 경로와 렌더링할 컴포넌트 사전. 선언적 코딩</li>
</ul>
<p>3장. 라우터 2</p>
<ul>
<li>히스토리 api, popstate. 브라우져 탐색 기능 지원</li>
<li>라우트 컨택스트의 컨슈머 컴포넌트를 래핑해 사용하는 코드가 장황</li>
<li>고차 컴포넌트 패턴: 횡단 관심사 해결, 라우팅은 횡단 관심사</li>
<li>withRouter: navigate, match, params 함수를 컴포넌트에 제공</li>
</ul>
<p>4장. 다이얼로그 1</p>
<ul>
<li>리액트 컨택스트 활용 두 번째</li>
<li>어플리케이션 전반에서 사용하기 때문에 컨택스트로 관리.</li>
<li>고차컴포넌트로 다이얼로그 제어 함수를 주입</li>
<li>컴포넌트 조합: 로딩 다이얼로그, 오류 다이얼로그, 주문 성공 다이얼로그</li>
</ul>
<p>5장. 다이얼로그 2</p>
<ul>
<li>스타일 상속 문제. 리액트 포탈로 해결</li>
<li>다이얼로그 기본 버튼 포커싱. 리액트 레프로 개선</li>
</ul>
<p>--</p>
<p>1, 2편에 걸쳐 요구사하을 모두 해결했다.</p>
<p>후반부는 리액트 훅을 다룬다.</p></div></article></main></section></div></main></div></div>

김정환 블로그 RSS Feed

김정환

마침내 2편 내용을 정리할 시간이다. 1장. 컨택스트 프롭 드릴링 현상을 리액트 컨택스트로 해결 MyReact로 컨택스트 직접 구현 이벤트 에미터 패턴으로 멀리 떨어진 객체간에 메세지 교류 createContext…

[리액트 2부] 2편 최종정리

댓글