본문 바로가기

분류 전체보기

 (989)
[css] fixed를 중첩할 경우 조심해야 할 점 모바일 웹앱 프로젝트 도중 아래에서 위로 올라오는 drawer 컴포넌트를 개발할 일이 생겼다. 그런데 내부부터 만들고자 해서, 동작하지 않는 css를 냅뒀었다. 상황은 다음과 같다. 가장 외부에 css 애니메이션을 적용해야 하는것을 일단 냅뒀다. 그러다보니 내부 div에 transition css 속성을 그대로 냅뒀다. 가장 외부는 레이아웃을 덮기 위한 fixed 요소가 존재한다. 그리고 drawer 내부에는 fixed 속성을 적용한 헤더가 존재한다. 드로어 컨텍스트가 배경을 덮어야 하니 제일 외부에 fixed를 둔다 그 다음 내부에 transform을 건 div를 둔다. 그 다음 드로어 내부 헤더에 fixed를 건다. 그러면 어떻게 될까...? 아래에서 직접 확인하자. 해당 상황을 재현한 예시 Rea..
리액트 성능 최적화 : 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를 사용하면 업데이트..

티스토리툴바