본문 바로가기

분류 전체보기57

Styled components helper - css, native element css prop 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.. 2022. 8. 15.
(2) headlessUI with styled-components 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.. 2022. 8. 12.
(1) headless UI headlessUI ?? 최근 포스팅을 하면서 React 가 Class 기반으로 쓰였던 시절부터 쓰인 Component Pattern 에 대해서 알게 되고, 이후 Hook 과 함께 사용되는 패턴은 어떻게 사용해야 할지 궁금함이 생겨 최근 2-3일간 React 와 관련된 아티클과 발표영상들을 찾아봤다. Contaier / Presentational Component Pattern 에서 Hook 으로 넘어왔으니, 컴포넌트의 로직은 모두 Hook 으로 관리해야하는건가? 라는 궁금함에 있어서 간단한 컴포넌트들을 만들어보면서 모든 로직을 hook 으로 분리하기에는 아래와 같은 애로사항이 있었다. 1. 도메인의 성격을 가지게 되어 범용적으로 쓰이기 어려워질 수 있음 2. 도메인을 걷어내도 여러군데에 쓰이지 않고 하.. 2022. 8. 12.
React Suspense Suspense React v18 에서 실험단계를 벗어난 Suspense 에 대해서 좀 더 알아봤다. Suspense 는 데이터를 불러오는 컴포넌트를 사용할 때, 데이터 로드가 완료되는 시점 (fulfilled) 에 렌더링을 할 수있도록 도와준다, 만약 데이터가 로드되지 않은 상태라면 fallback props 를 통해 Loading 과 같은 임시적으로 보여줄 컴포넌트를 보여줄 수 있다. 사용법은 데이터를 불러오는 컴포넌트를 Suspense 로 감싸서 사용하는데, 사용 예제같은 것을 확인해보니 react-query 나 swr 에서는 suspended 상태로 만드는 옵션과 함께 간단히 사용할 수 있었다. 만약 내가 사용하고 있는 fetch 관련 hook 이 있다면, suspended 상태로 만들도록 확장하.. 2022. 8. 11.
VSC Snippet 설정하기 설정하기 프로젝트를 처음 시작하면 만들 파일이 너무나도 많습니다. 그런데 하나하나 다 만들어내기엔 너무 귀찮죠, 이를 위해서 VSC 에서는 Snippet 이라는 기능을 제공하고 있습니다. 간단하게 VSC 를 실행한 이후, Code -> Preferences -> Configure User Snippets 로 실행하면 VSC 에서 어느 확장자에 적용할 것인지 확인한 이후 설정파일을 열어줍니다. 어느 확장자에 적용할 것인지 선택했을 때, 만약 typescript react 를 선택한다면 .tsx 파일 내부에서만 설정한 snippet 를 사용할 수 있습니다. 기본 설정파일을 보면 영어로 간단히 설명이 적혀있지만, 각각의 속성에 대해서 이야기 하자면 prefix : 어느 단축어로 해당 snippet 을 사용할 .. 2022. 8. 9.
[React] Font Awesome 설정하기 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/.. 2022. 8. 4.

티스토리툴바