Frontend/⚛ React12 React Children 보통 children 의 type 은 ReactNode 로 설정하는 편이다. children 을 배열로 사용할 상황이 있었다. props 를 통해 받은 값을 바탕으로 Group 의 최대 갯수를 지정하고, slice 하고싶었다. 물론 group 이라는 컴포넌트에 미리 데이터를 slice 하여 보내줄 수도 있겠지만, 미리 데이터를 정제하여 보내는 것 보다 생략해서 보여주는 로직은 Group 컴포넌트의 역할이 맞다고 생각했다. 간단히 JS 환경에서 테스트해보았을 땐 children 이 배열로 반환되어서 map 을 사용할 수 있을거라고 생각하고 사용해보았다. 그런데 다음과 같은 ts 오류가 발생했다. children 을 ReactNode 로 타입을 지정하여 사용하고 있기 때문에 오류가 났다. 의도한대로 map .. 2022. 9. 7. styled component font import, layout shift 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.. 2022. 9. 1. ErrorBoundary 구현기 ErrorBoundary ErrorBoundary 를 구현했다. ErrorBoundary 를 만들어 보니 내가 원하는 곳에서 원하는 컴포넌트로 fallback 하고 싶은 상황이 무조건 생길 것이고 그 때마다 ErrorBoundary 를 만드는 것은 비효율적이라는 생각이 들었고, 이와 관련하여 한재엽님이 Suspense 와 ErrorBoundary 를 선언적으로 사용하기 와 관련된 게시글을 읽어보았다. 늘 그렇듯 학습을 위해 프로젝트에 바로 적용하기보다 컨셉을 하나하나 적용해가며 불편함을 겪고 넘어가려한다.. 일단은 fallback component 를 지정하여 렌더하는 방식부터 해볼 생각이다. 설계했던 백엔드 부터 간단히 만들어서 사용하던 백엔드 응답에 문제가 있었다. 무조건 2XX 의 status co.. 2022. 8. 29. Server State, Client State (feat. react query) Client State, Server State 며칠 전 우아한 테크세미나에서 진행한 React Query 발표영상을 보면서 Server State 와 Client State 의 구분에 대한 느낌을 잘 받았다. 두리뭉실하게 전역상태 라고 사용하던 것을 명확히 구분지어 사용할 기준이 생겼다. 그런데 React Query 로 이것 저것 만들어 보다보니, Server State 의 데이터를 Action 을 통해 Client State 에 저장해야 하는 상황도 존재하겠다는 생각이 들었다. 발표하신 내용의 질문으로도 나온 주제였는데, 그때 당시에는 질문의 상황을 제대로 인지하지 못하여 와닿지 않았었다. 그런데 만약 Server 로 부터 데이터를 전달받아, 어플리케이션은 데이터로부터 사용자가 선택한 특정 값 을 기.. 2022. 8. 22. 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 2 다음
