JH 기술 블로그

사이드 프로젝트를 진행하면서 여러 아이콘들을 svg 파일들로 관리해야 했다.svg 파일들을 어떻게 해야 효율적으로 다룰 수 있을까 알아보았고, SVGR을 발견하게 되었다. 이번 포스팅을 통해서 SVGR을 적용하는 방법과 더불어 storybook에서까지 적용해보는 시간을 가져보려고 한다.🔥SVGR을 사용하는 이유SVGR은 SVG 파일을 React 컴포넌트로 변환하여 더욱 직관적이고 재사용 가능한 방식으로 SVG를 다룰 수 있게 한다.SVGR을 적용한 코드와 적용하지 않은 코드를 비교하면 SVGR의 장점을 알 수 있을 듯하다.1)  img 태그를 이용해서 importfunction App() { return ;}기본 태그인 img를 이용하면 파일의 경로만 입력해주면 쉽게 렌더링 할 수 있다는 장점이 존재..

👏들어가기 전에... 이번 포스팅의 주제는 합성 컴포넌트로, children에 대해서 잘 모르겠다면 이 전 포스팅을 보고 오는 것을 추천한다. [React] children 알아보기 (tistory.com) [React] children 알아보기 최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 humor12.tistory.com 사이드프로젝트를 통해 많은 코드를 작성하면서 느끼는 것은 바로 프론트엔드가 다뤄야 할 관심사가 너무나도 많다는 것이다. UI로직, 서버 로직, 유저 인증인가 로직...이러한 관심사를 잘 분리하지 않는다면 스파게티 코드가 될 수 있다는 것..

최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 진행하다보니 코드의 재사용성이나 가독성 부분에서 매우 떨어지는 경험을 했었다. 그러다 점차 협업을 할 일이 많아지기 시작하다 보니 자연스럽게 디자인패턴에 관심이 가기 시작하였다. 이렇게도 할 수 있구나...! 각설하고, 합성컴포넌트에 대한 본격적인 포스팅 전에 children의 개념에 대해서 정리해보고자 한다. 1. children은 무엇일까? children은 React 컴포넌트에서 사용되는 특별한 prop으로, 컴포넌트 내용을 나타내는 역할을 한다. const ParentComponent = ({children..