y0wLAG CaUzSO2venFMQ rXhkQwvGFGp9WbXqkn6vn 2J aswC ODhM78ivg1wMC5JY9Y5XN6Cqh4mR 7EP7Pn bQL9R6m7SaMcPZxHUGf Ms Jsw9z4rxiR

최근 네트워크 기본이 좀 부족하다고 느낀 일이 있어서 처음부터 다시 읽기 시작했다. 챕터 순으로 손필기와 함께 요약해가며 정독 후, 다시 내용을 복기하며 작성한 글이다. 과정에서 생긴 궁금증이나 혼동되는 개념은 검색하고 추가 작성했다. 또한 내용을 이해하기에 더 적절한 순서로 챕터의 내용을 편집하여 작성했다. (복붙 필사기계가 의미가 있을까 싶어 나름 머

지난 글에 이은 Fluent React의 5장, Powerful Patterns 챕터의 마지막 내용이다. Props와 연관된 설계 패턴을 모아 작성하였다.Render Propconst WindowSize = (props) => { const [size, setSize] = useState({ width: -1, height: -1 }); return

지난 글에 이어서 작성Compound 합성 컴포넌트의 이점은 렌더링의 제어를 부모에게 역전시키면서도, 자식들 사이에서 문맥적 상태 인식을 유지한다는 것입니다. (...) 또 다른 이점은 이 패턴이 관심사의 분리를 촉진한다는 것으로, 이는 시간이 지남에 따라 응용 프로그램이 훨씬 더 잘 확장할 수 있도록 돕습니다.Compound 패턴은함수형 컴포넌트에서도

지난 글에 이어서, Fluent React에서 다루는 컴포넌트 설계 패턴. 이번에는 HOC 패턴을 다뤄본다.High Order Component (HOC) 고차 컴포넌트고차 컴포넌트(HOC)는 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 컴포넌트입니다. HOC는 여러 컴포넌트 간에 공통적으로 사용되는 동작을 반복하지 않고도 공유할 경우에 유용합니

지난 글에서 최적화를 위해 사용되는 훅과 React.memo의 적절한 사용법에 대해 깊이 살펴보았다. 이어지는 내용은 리액트 컴포넌트의 일반적인 설계 패턴이다. 필요한 만큼이나 알고자 하는 갈증이 깊었고, 또 중요한 내용이기에 책에서 이해한 내용과 함께 직접 고민한 생각을 정리해본다. 컴포넌트 설계에 관한 내용들은 여러차례 나누어 작성할 예정이다.들어가기에