Styled-components css prop 현재 사이드프로젝트를 진행하면서 styled-components 에서 css prop 을 사용하고 있습니다. css prop 은 Styled components v4 부터 지원하게 되었는데요, 사실 @emotion 에서 사용하던 방식이라고 합니다. Styled-components 와 @emotion 이 경쟁관계를 가져가면서 css prop 을 추가적으로 지원하게 된 셈인데요, HTML 태그를 명시적으로 확인할 수 있고, 태그를 단순 반복으로 생성하는 styled 방식에서 벗어나 새로운 방식을 사용해보기 위해 도입하였습니다. // 이 코드는 props.theme.colors.text}; `} /> // 아래 코드와 동일합니다. import styled fro..

보통 children 의 type 은 ReactNode 로 설정하는 편이다. children 을 배열로 사용할 상황이 있었다. props 를 통해 받은 값을 바탕으로 Group 의 최대 갯수를 지정하고, slice 하고싶었다. 물론 group 이라는 컴포넌트에 미리 데이터를 slice 하여 보내줄 수도 있겠지만, 미리 데이터를 정제하여 보내는 것 보다 생략해서 보여주는 로직은 Group 컴포넌트의 역할이 맞다고 생각했다. 간단히 JS 환경에서 테스트해보았을 땐 children 이 배열로 반환되어서 map 을 사용할 수 있을거라고 생각하고 사용해보았다. 그런데 다음과 같은 ts 오류가 발생했다. children 을 ReactNode 로 타입을 지정하여 사용하고 있기 때문에 오류가 났다. 의도한대로 map ..

layout shift 처음엔 List Item 의 width 가 바짝 차렷 하고있는 모습을 먼저 보였다. 이를 해결하기 위해 Item 의 width 를 어떻게줄까.. 하다가 List 에 max-content 를 주니 해결이 되는 모습을 보았다. 그런데 문제가 생겼다. Layout Shift? 처음엔 저게 왜 생겼지? top, left 를 지정해주다 생긴건가? 싶었는데 여러 테스트를 해보면서 width 가 max-content 로 동적으로 지정되니 생기는 문제인가.. 로 추측해보면서 Dropdown Item 의 width 를 지정해줘보았다. const DropdownItem = (props) => { const { children } = props; return ( {children} ); }; 뭔가 l..

ErrorBoundary ErrorBoundary 를 구현했다. ErrorBoundary 를 만들어 보니 내가 원하는 곳에서 원하는 컴포넌트로 fallback 하고 싶은 상황이 무조건 생길 것이고 그 때마다 ErrorBoundary 를 만드는 것은 비효율적이라는 생각이 들었고, 이와 관련하여 한재엽님이 Suspense 와 ErrorBoundary 를 선언적으로 사용하기 와 관련된 게시글을 읽어보았다. 늘 그렇듯 학습을 위해 프로젝트에 바로 적용하기보다 컨셉을 하나하나 적용해가며 불편함을 겪고 넘어가려한다.. 일단은 fallback component 를 지정하여 렌더하는 방식부터 해볼 생각이다. 설계했던 백엔드 부터 간단히 만들어서 사용하던 백엔드 응답에 문제가 있었다. 무조건 2XX 의 status co..

Client State, Server State 며칠 전 우아한 테크세미나에서 진행한 React Query 발표영상을 보면서 Server State 와 Client State 의 구분에 대한 느낌을 잘 받았다. 두리뭉실하게 전역상태 라고 사용하던 것을 명확히 구분지어 사용할 기준이 생겼다. 그런데 React Query 로 이것 저것 만들어 보다보니, Server State 의 데이터를 Action 을 통해 Client State 에 저장해야 하는 상황도 존재하겠다는 생각이 들었다. 발표하신 내용의 질문으로도 나온 주제였는데, 그때 당시에는 질문의 상황을 제대로 인지하지 못하여 와닿지 않았었다. 그런데 만약 Server 로 부터 데이터를 전달받아, 어플리케이션은 데이터로부터 사용자가 선택한 특정 값 을 기..

Styled-components css() 함수, 왜쓰지? styled-component 를 사용하면서 props 의 특정 상태에 따라 스타일링을 다르게 하는 경우가 있다. 그런데 이전에 다른 분들이 사용하시는 것을 보면 css() 함수와 함께 사용하는 경우를 여럿 봤다. import styled, { css } from 'styled-components'; const flexMixin = ({ jc, ai }: { jc?: string; ai?: string }) => css` display: flex; ${jc && css` justify-content: ${jc}; `} ${ai && css` align-items: ${ai}; `} `; const MyBox = styled.div` ${({ fl..

headlessUI with styled-components 어제 올린 글 에서 headlessUI 로 로직을 분리한다면, 스타일은 어떻게 접목시킬지에 대해 고민을 했었다. 이리저리 삽질을 해보았는데, 해결책은 Styled-components 공식문서에서 찾았다. import { createContext, useContext, useState } from "react"; const DropdownContext = createContext(); function DropDown(props) { const openState = useState(false); return ( {props.children} ); } function useDropdownContext() { const context = useCont..

headlessUI ?? 최근 포스팅을 하면서 React 가 Class 기반으로 쓰였던 시절부터 쓰인 Component Pattern 에 대해서 알게 되고, 이후 Hook 과 함께 사용되는 패턴은 어떻게 사용해야 할지 궁금함이 생겨 최근 2-3일간 React 와 관련된 아티클과 발표영상들을 찾아봤다. Contaier / Presentational Component Pattern 에서 Hook 으로 넘어왔으니, 컴포넌트의 로직은 모두 Hook 으로 관리해야하는건가? 라는 궁금함에 있어서 간단한 컴포넌트들을 만들어보면서 모든 로직을 hook 으로 분리하기에는 아래와 같은 애로사항이 있었다. 1. 도메인의 성격을 가지게 되어 범용적으로 쓰이기 어려워질 수 있음 2. 도메인을 걷어내도 여러군데에 쓰이지 않고 하..

Suspense React v18 에서 실험단계를 벗어난 Suspense 에 대해서 좀 더 알아봤다. Suspense 는 데이터를 불러오는 컴포넌트를 사용할 때, 데이터 로드가 완료되는 시점 (fulfilled) 에 렌더링을 할 수있도록 도와준다, 만약 데이터가 로드되지 않은 상태라면 fallback props 를 통해 Loading 과 같은 임시적으로 보여줄 컴포넌트를 보여줄 수 있다. 사용법은 데이터를 불러오는 컴포넌트를 Suspense 로 감싸서 사용하는데, 사용 예제같은 것을 확인해보니 react-query 나 swr 에서는 suspended 상태로 만드는 옵션과 함께 간단히 사용할 수 있었다. 만약 내가 사용하고 있는 fetch 관련 hook 이 있다면, suspended 상태로 만들도록 확장하..

Font Awesome ? 프로젝트를 하다보면 특정 아이콘이 필요할 때가 있습니다. 그것은 디자이너가 Figma 로 전해줄 수도 있고, 혹은 외부에서 svg 를 다운받아서 직접 설정할 수도 있습니다. 이전 토이프로젝트를 진행할 때, React 가 아닌 간단한 HTML + CSS 로 정적페이지를 만들 때 사용했던 Font Awesome 을 React 에서도 사용할 수 있는 걸 알고있어서 Font Awesome 을 어떻게 사용할 수 있는지 간단하게 남기고자 합니다. Set Font Awesome 설치 순서는 Font Awesome 의 문서를 참고하였습니다. (6.1.2 버전 기준) npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/..