REACT (187) 썸네일형 리스트형 컴파운드 컴포넌트 잘만들기 3탄 : compound component + uncontrolled component + co-location 삼신기 사용하기 컴파운드 컴포넌트 + uncontrolled component + co-location 삼신기로, API 컨슈머의 상태 관리 부담을 덜어줄 수 있습니다. 또한 전역 상태도 피할 수 있습니다. 원문 번역입니다 : https://jjenzz.com/avoid-global-state-colocate Avoid Global State — Co-locate with Uncontrolled Compound Components Over the years, I've thought a lot about colocation and how to effectively apply this principle to the components I build. I began to notice a pattern emerge in my .. 컴파운드 컴포넌트 잘만들기 2편 : Smarter, Dumb Breadcrumb 컴파운드 컴포넌트를 이용하여, 컴포넌트의 렌더링 위치에 관계없이 DOM을 원하는 곳에 삽입하는 방법을 배워봅니다. 원문 번역입니다 : https://jjenzz.com/smarter-dumb-breadcrumb Smarter, Dumb Breadcrumb With the help of React Context and Portals we can utilise the component tree to generate a breadcrumb trail that doesn't know your hierarchy or your location within it. jjenzz.com 이동 경로(Breadcrumbs)는 사용자가 웹사이트나 애플리케이션 내에서 자신의 위치를 찾는 데 도움이 되는 유용한 도구입니다. 컴파.. The Web’s Next Transition(웹 애플리케이션 아키텍처의 미래) 웹 애플리케이션 아키텍처의 미래를 살펴봅시다. 원문입니다 : https://www.epicweb.dev/the-webs-next-transition The Web’s Next Transition Web is made up of technologies that got started over 25 years ago. Now, we are transitioning to a new and improved architecture for building web applications. www.epicweb.dev 웹은 25년 전에 시작된 기술로 구성됩니다. HTTP, HTML, CSS, JS는 모두 90년대 중반(제가 8살 때)에 처음으로 표준화되었습니다. 그 이후로 웹은 유비쿼터스 애플리케이션 플랫폼으로 진화했습.. 리액트 서버 컴포넌트와 리믹스[React Server Components and Remix] 리믹스와 리액트 서버 컴포넌트의 관계를 알아봅니다. 원문 링크입니다 : https://remix.run/blog/react-server-components React Server Components and Remix The current state of React Server Components their future in Remix. remix.run Remix v1 릴리스 후 한 질문이 계속 반복되었습니다. 리액트 서버 컴포넌트는요? 좋은 질문입니다! 많은 분들과 마찬가지로 우리는 2018년에 처음 발표된 이후로 React Suspense를 계속 실험해 왔습니다. 사실, 초기 버전의 Remix에서 해당 API를 사용했습니다만, 리믹스의 출시 준비가 되었을때 해당 기능이 공개되지 않을 것임을 알고나서,.. Remix의 데이터 플로우[Data Flow in Remix] Remix를 사용하면 상태관리 도구가 왜 필요 없는지 알아봅니다. TLDR : Action이 발생할 때마다 변경된 데이터를 Loader를 통해 Component에 반영해주면 되기 때문입니다. 해당 로직은 서버에서 동작하므로 동기화에 대해 걱정할 필요도 없습니다. 원문 링크입니다 : https://remix.run/blog/remix-data-flow Data Flow in Remix Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again. remix.run React가.. Vue3과 React 훅의 반응성 비교 : 불변 VS 가변 리액트와 Vue3의 반응형 구현은 어떤 차이가 있을까요? 1. 리액트는 불변 모델을 사용합니다. 리액트는 데이터와 UI를 동기화합니다. https://itchallenger.tistory.com/143 게시물에서 설명했듯이, 리액트는 상위 컴포넌트 렌더링이 반드시 하위 컴포넌트 트리 전체를 리렌더링 합니다. (중간에 memo같은 장벽이 없으면요) 여기서 렌더링이란 리액트 컴포넌트를 만드는 함수를 호출하는 것을 의미하며 실제 돔에 mount 하는 것을 의미하지는 않습니다. useEffect는 사이드이펙트와 UI의 동기화를 의미합니다. useEffect는 컴포넌트가 마운트 된 후, 그리고 언마운트 클린업 시, 혹은 업데이트 후에 콜백을 호출합니다. 또한 해당 훅 내부에서 UI과 관련한 사이드이펙트를 실행하는.. [React hooks] 리액트 훅의 원리 : 단지 배열일 뿐 리액트 훅이 배열임임을 알아봅니다. 원문 : https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e React hooks: not magic, just arrays Untangling the rules around the proposal using diagrams medium.com 저는 새로운 hooks API의 열렬한 팬입니다. 그러나 어떻게 사용해야 하는지에 대한 몇 가지 이상한 제약(odd constraints)이 있습니다. 여기에서는 이러한 규칙의 이유를 이해하는 데 어려움을 겪는 사람들을 위해 새 API 사용에 대해 생각하는 방법에 대한 모델을 제시합니다. 훅이 어떻게 동작하는지 알아보기 훅의 규칙 React 핵심.. 리덕스 이후의 삶(Life after Redux) : 리덕스 없이 리덕스 장점 누리기 Redux는 유용한 도구이지만 React의 새로운 API는 다음 애플리케이션에서 해당 라이브러리를 대체할 수 있습니다. 원문 : https://medium.com/itnext/life-after-redux-21f33b7f189e Life after Redux Redux has been a useful tool but React’s new APIs are cause for pause as to whether or not you should use it in your next application. itnext.io 이 기사에서는 React의 새로운 useReducer 훅을를 간단한 이벤트 버스와 결합하여 애플리케이션 아키텍처에 필요한 확장성을 제공하는 동시에 Redux가 대규모 애플리케이션에서 종종 촉진하.. 이전 1 2 3 4 5 6 7 8 ··· 24 다음
