1TK6 tXNlu bYOUFZpkhUTvcmk8SewW UDD2K4O3c 7NpNaZc0MoDQnrMbQlMotGFiIQIauN5mF6y NLNGWbisIN4I0M0Iy1Q98XnwOWZc3WvD5 rCuVFkZw

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

최근에 출간된 Fluent React를 읽고 나서 인상 깊었던 내용을 정리해보고자 한다. 이전에 'Learning React'는 React 18과 관련된 최신 내용이 부족해 아쉬웠지만, 이 책을 통해 그러한 부분을 완전히 보완할 수 있었다.가령 책에서는 그동안 궁금했던 React Fiber의 상세한 설명과 서버 컴포넌트에 대한 깊이 있는 내용을 다룬다. R