2022/07 (37) 썸네일형 리스트형 리액트 성능 최적화 : children props를 이용하여 리렌더링 방지 재미있는 글을 봤습니다. https://kentcdodds.com/blog/optimize-react-re-renders One simple trick to optimize React re-renders Without using React.memo, PureComponent, or shouldComponentUpdate kentcdodds.com 부모 컴포넌트가 리렌더링되면 자식들은 다 리렌더링 되는거 아닌가요? 그런데 children들이 리렌더링 되지 않는 경우가 있다고요? React는 리렌더링 시 전달된 children 객체에 대하여 얕은 비교를 수행합니다. 즉, 전달된 children이 동일한 객체이면 리렌더링을 수행하지 않습니다. (React.memo는 1단계 깊이 비교를 수행하는 것으로 알고 있.. 개인적으로 생각해본 컴포넌트 설계론 + 카카오 FE 기술블로그 염탐 보호되어 있는 글입니다. Styled-Components의 비밀 파헤치기 styled-components의 내부 구현을 살펴봅니다. 원문 링크 : https://www.joshwcomeau.com/react/demystifying-styled-components/ Demystifying styled-components For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we'll learn exactly how styled-com ww.. Tailwind CSS와 CSS-in-JS 무엇을 사용할까? 언제 어떤 도구를 쓰는게 맞는지 생각해보자. TLDR : 생산성 : Css-in-js 유지보수성, 확장성 : tailwind CSS Styled-Components 베스트 프랙티스(모범 사례) 원문 보기 :https://www.joshwcomeau.com/css/styled-components/ The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've learned.. itchallenger.tistory.com Styled-Components의 비밀 파헤치기 7원문 링크 : https://www.joshwcomeau.com/react.. 새로운 리액트 공식문서로 배우는 Context API 2편 : 리듀서와 컨텍스트로 애플리케이션 확장하기 원문 보기 : https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context Scaling Up with Reducer and Context A JavaScript library for building user interfaces beta.reactjs.org 리듀서를 사용하면 컴포넌트의 상태 업데이트 논리를 통합할 수 있습니다. (+핸들러의 변경 필요 X) 컨텍스트를 사용하면 데이터를 컴포넌트 트리 깊숙히 전달할 수 있습니다. 리듀서와 컨텍스트를 결합하여 복잡한 화면의 상태를 관리할 수 있습니다. 해당 문서는 딱히 주목할만한 내용이 없네요. 오늘 배울 내용 리듀서를 컨텍스트와 결합하는 방법 props를 통한 상태 및 디스패치 전달을 피하는 .. 새로운 리액트 공식문서로 배우는 Context API 1편 : 프롭 드릴링 해결하기 원문 링크 : https://beta.reactjs.org/learn/passing-data-deeply-with-context 컨텍스트를 사용하면 부모 컴포넌트가 무언가를 props를 통해 명시적으로 전달하지 않아도 하위 컴포넌트가 얼마나 깊은 곳에 존재하는지 여부에 관계없이 하위 트리의 모든 컴포넌트에서 일부 정보를 사용할 수 있도록 합니다. 배울 내용 "프롭 드릴링"이란 반복적인 prop 전달을 컨텍스트로 바꾸는 방법 컨텍스트의 일반적인 사용 사례 컨텍스트의 대안 "프롭 드릴링"이란 보통 공유 상태는 상위 컴포넌트로 올립니다. 이 경우 매우 아래에 있는 컴포넌트에 전달하기 곤란해 질 수 있죠. 이처럼 여러 단계에 거처 prop을 전달하는 것을 prop drilling이라 합니다. props를 전달하.. 새로운 리액트 공식문서로 배우는 Reducer 원문 : https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer Extracting State Logic into a Reducer A JavaScript library for building user interfaces beta.reactjs.org Reducer reducer의 명칭은 배열의 reduce(누적) 연산에서 비롯되었습니다. reduce는 전체 배열을 다른 값으로 누적(reduce)합니다. 우리의 리듀서는 지금까지 변화해 온 상태와 액션을 취하고 다음 상태를 반환합니다. 우리의 리듀서는 시간이 지남에 따라 액션을 상태로 누적합니다. 리듀서는 상태 관리 로직을 추출하기 위해 사용합니다. useReducer를 사용하면 업데이트.. 몽고db 문법으로 불변성을 관리하는 immutability-helper 깃헙 문서 내용 번역이다 : https://github.com/kolodny/immutability-helper GitHub - kolodny/immutability-helper: mutate a copy of data without changing the original source mutate a copy of data without changing the original source - GitHub - kolodny/immutability-helper: mutate a copy of data without changing the original source github.com 원본 데이터를 변경하지 않고 복사본을 변경하여 리턴하는 라이브러리다. 다른 라이브러리들도 많은데 이걸 왜쓰느냐 하면 몽고디비.. 이전 1 2 3 4 5 다음
