<div id="readability-page-1" class="page"><div id="post-content" itemprop="articleBody">
<p><a href="https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889">Making Sense of React Hooks</a></p>
<ul>
<li>Why Hooks? 등장배경?
<ul>
<li>복잡한 컴포넌트를 작게 쪼갤수 없다.
<ul>
<li>상태 때문. 함수나 다른 컴포넌트로 분리 불가</li>
</ul>
</li>
<li>그래서 이런걸 만든다.
<ul>
<li>거대한 컴포넌트: 리팩토링, 테스트 어려워</li>
<li>중복로직: 다른 컴포넌트와 라이프사이클</li>
<li>복잡한 패턴: 렌터 프롬, hoc</li>
</ul>
</li>
<li>그래서 훅이 나왔다. 재사용할수 있는 격리된 유닛</li>
</ul>
</li>
<li>Do Hooks Make React Bloasted?
<ul>
<li>용량 매우 작어. 훅을 써서 코딩하면 더 작아질거야</li>
</ul>
</li>
<li>What Are Hooks, Exactly?
<ul>
<li>코드 재사용에 대해 생각해보자</li>
<li>콤포넌트는 강력하지만 ui렌더 때문에 non-visual 로직을 공유할때 불편</li>
</ul>
</li>
<li>Show me some code
<ul>
<li>useWindowWidth</li>
<li>Hooks are fully encapsulate - each time you call a Hook, it gets isolated local state within the currently executing component</li>
</ul>
</li>
<li>So what about classes
<ul>
<li>no deprecated</li>
</ul>
</li>
<li>But aren't hooks magic?
<ul>
<li>컴포넌트별로 훅 리스트를 관리</li>
</ul>
</li>
</ul>
<h2 id="2022-04-03-일"><a href="#2022-04-03-%EC%9D%BC" aria-label="2022 04 03 일 permalink"></a>2022-04-03 일</h2>
<p><a href="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e">React hooks: not magic, just arrays</a></p>
<ul>
<li>훅 규칙: 1) 반복/조건/중첩 함수에서 호출 금지 2) 반드시 리액트 함수에서 호출</li>
<li>State management in hooks is all about arrays</li>
<li>그림으로 설명</li>
<li>순서를 바꾸면 커서에 문제 생겨</li>
</ul>
<p><a href="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e">From React.Component to hooks</a></p>
<ul>
<li>라이프 사이클 메소드를 훅으로 대체하는 과정</li>
<li>useMount, useUnMount, useUpdate</li>
<li>react-pirate: useTimeout, useToggle, 뭐 이런것도 있다</li>
</ul>
<h2 id="2022-04-06-수"><a href="#2022-04-06-%EC%88%98" aria-label="2022 04 06 수 permalink"></a>2022-04-06 수</h2>
<p><a href="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e">State Management with React Hooks — No Redux or Context API</a></p>
<ul>
<li>클래스 컴포넌트가 사이드 이펙드를 관리하는 방법은 라이프사이클 메소드. 훅은 useEffect()로 관리</li>
<li>use-global-hook</li>
<li>라이브러리 만드는 과정 소개</li>
<li>전역 상태를 useState, useEffect 만으로 구현</li>
<li>카운터 여러개가 하나의 상태를 구독하는 예제</li>
</ul>
<h2 id="2022-04-09-토"><a href="#2022-04-09-%ED%86%A0" aria-label="2022 04 09 토 permalink"></a>2022-04-09 토</h2>
<p><a href="https://www.robinwieruch.de/react-hooks-fetch-data/">How to fetch data w/ React Hooks</a></p>
<ul>
<li>data, query, search, url, loading, error</li>
<li>useHackerNewsApi (custom hook)</li>
<li>useReducer. 상태를 하나로 관리. 장점 무엇?</li>
<li>about. data fetch!</li>
</ul>
<p><a href="https://testdriven.io/blog/react-hooks-primer/">Primer on React Hooks</a></p>
<ul>
<li>훅을 만든 이슈
<ul>
<li>
<ol>
<li>재사용 (상태)</li>
</ol>
</li>
<li>컴포넌트 단순</li>
<li>클래스 안써. 러닝커브 때문</li>
</ul>
</li>
<li>useState. useEffect</li>
<li>Rules. 1) 같은 순서, 탑레밸 2) 조건/반복만 안 X 3) 클래스 컴포넌트 X 4) use로 시작</li>
<li>Custom hook. 복잡성 제어할 수. 접근 쉬운 코드 만들 수</li>
</ul>
<h2 id="2022-04-11-월"><a href="#2022-04-11-%EC%9B%94" aria-label="2022 04 11 월 permalink"></a>2022-04-11 월</h2>
<p><a href="https://testdriven.io/blog/react-hooks-advanced/">React Hooks - A deeper dive featuring useContext and useReducer</a></p>
<ul>
<li>useContext. 컨택스트 사용 단순. 훅스의 효과</li>
<li>useReducer. 이것도?</li>
</ul>
<p><a href="https://dev.to/doppelmutzi/testing-of-a-custom-react-hook-for-fetching-data-with-axios-4gf1">Testing of a custom react hook for fetching data w/ axios</a></p>
<ul>
<li>@testing-library/react-hooks. react-test-renderer</li>
</ul>
<h2 id="2022-04-12-화"><a href="#2022-04-12-%ED%99%94" aria-label="2022 04 12 화 permalink"></a>2022-04-12 화</h2>
<p><a href="https://overreacted.io/ko/a-complete-guide-to-useeffect/">useEffect 완벽 가이드</a></p>
<ul>
<li>클로져에 대한 내용이 잘 담겨있다.</li>
<li>모든 렌더링은 고유의 프롭, 상태, 이벤트 핸들러, 이펙트</li>
<li>고유의 모든 것을 가진다. 클로져 덕분</li>
<li>멘탈모델 변경. 라이프 사이클 → 동기화</li>
</ul>
<h2 id="2022-04-17-일"><a href="#2022-04-17-%EC%9D%BC" aria-label="2022 04 17 일 permalink"></a>2022-04-17 일</h2>
<p><a href="https://overreacted.io/ko/react-as-a-ui-runtime/">UI 런타임으로서의 리액트</a></p>
<ul>
<li>번역은 부족. 새로운 내용.</li>
<li>호스트 트리. 호스트 객체</li>
<li>리액트 앨리먼트</li>
<li>진입접. jsx를 안쓰니 달리 보인다</li>
<li>재조정. 조건. 리스트</li>
<li>컴포넌트</li>
<li>순수성</li>
<li>재귀</li>
<li>제의 역전</li>
<li>지연평가</li>
<li>일괄 작업</li>
</ul>
<h2 id="2022-04-18-월"><a href="#2022-04-18-%EC%9B%94" aria-label="2022 04 18 월 permalink"></a>2022-04-18 월</h2>
<p><a href="https://overreacted.io/ko/how-are-function-components-different-from-classes/">함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?</a></p>
<ul>
<li>FC는 렌더링 값을 고정
<ul>
<li>클래스 컴포넌트의 버그부터 시작</li>
<li>this를 변경할수 있어. → 클로져로 해결</li>
<li>FC는 렌더시 값을 유지</li>
</ul>
</li>
<li>클래스처럼 하려면 ref 사용
<ul>
<li>interval, subscription 같은 명령형 API 다룰 때</li>
<li>최적화 적합 (useCallback 자주 바뀔 때)
<ul>
<li>→ reducer 추천</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="2022-04-19-화"><a href="#2022-04-19-%ED%99%94" aria-label="2022 04 19 화 permalink"></a>2022-04-19 화</h2>
<p><a href="https://www.telerik.com/kendo-react-ui/react-hooks-guide/">The Guide to Learning React Hooks(Examples &amp; Tutorials)</a></p>
<ul>
<li>1장. 훅 규칙</li>
<li>2장. state, effect. localStorage 저장 예제. 사이드 이펙트</li>
<li>3장. 컨택스트를 위한 훅</li>
<li>4장. 리듀서. Array.prototype.reducer 와 비교. 리듀서 패턴. 강의 참고용으로 좋다</li>
</ul>
<h2 id="2022-04-26-화"><a href="#2022-04-26-%ED%99%94" aria-label="2022 04 26 화 permalink"></a>2022-04-26 화</h2>
<p><a href="https://yozm.wishket.com/magazine/detail/1396/">자바스크립트에서 객체지향을 하는게 맞나요?</a></p>
<ul>
<li>프로그래밍 패러다임을 설명</li>
</ul>
<p><a href="https://kentcdodds.com/blog/react-hooks-whats-going-to-happen-to-react-context">React Hooks: What's going to happen to react context?(2018-12)</a></p>
<ul>
<li>렌더 프롭 api를 써야 컨슈머</li>
<li>클래스 컴포넌트는 contextType으로 해결. 하지만 하나의 컨슈머만 써야하는 한계</li>
<li>useContext 훅. 읽기 쉽고, 이해 쉽고, 리팩토링 쉽고, 유지 쉬어!</li>
</ul>
<p><a href="https://kentcdodds.com/blog/reacts-new-context-api">React's new Context API(2018)</a></p>
<ul>
<li>쓰지마라. 실험 적이다. → 예전 이야기</li>
<li>react-redux, mobx-react, react-router 에서 씀</li>
<li>RFCs repository</li>
<li>예제</li>
</ul>
<h2 id="2022-04-28-목"><a href="#2022-04-28-%EB%AA%A9" aria-label="2022 04 28 목 permalink"></a>2022-04-28 목</h2>
<p><a href="https://www.saeyoonjeong.com/blog/remote-work">재택근무 보편론</a></p>
<ul>
<li>텍스트, 비동기 커뮤니케이션 익숙해야</li>
<li>화상회의 피로도가 대면 회의 배비 2-3배 피로 → 카메라 끔</li>
</ul>
<p><a href="https://harness.io/blog/feature-flags/trunk-based-development/">How Feature Flags Helper w/ TBD</a></p>
<ul>
<li>TDB. Trunk Based Development</li>
<li>매일 main 브렌치(이게 트렁크?)에 합쳐
<ul>
<li>배포를 어떻게 하지?</li>
</ul>
</li>
</ul>
<p><a href="https://trend21c.tistory.com/2231">당신에게 트렁크 기반 개발 추천</a></p>
<ul>
<li>다크 런칭</li>
<li>Feature branch: 큰 머지, 충돌 높아</li>
<li>Trunk branch: 적은 머지, 충돌 낮아. 리뷰 수월</li>
</ul>
<p><a href="https://code-masterjung.tistory.com/73">트렁크 기반 개발(Trunk-Based development) - Jocob's blog</a></p>
<ul>
<li>몇 가지 규칙</li>
<li>Pair / Mob 프로그래밍</li>
<li>신뢰할 수 있는 빌드</li>
<li>Branch by Arstraction. Feature Flags</li>
<li>쇼규모 배치로 개발</li>
<li>빠른 빌드</li>
</ul></div></div>

김정환 블로그 RSS Feed

김정환

2022-04-01 금 Making Sense of React Hooks Why Hooks…

2022-04 스크랩

댓글