My Boundary As Much As I Experienced

설계 배경UI 개발에서 버튼은 필수적인 컴포넌트 중 하나이다.하지만 단순한 기능처럼 보여도 버튼 컴포넌트를 잘 설계하는 것은 생각보다 까다로운 작업이다.다양한 상태, 크기, 색상, 아이콘 배치 등 요구사항을 충족하면서도 유지보수성과 재사용성을 고려해야 하기 때문이다. 이번에 디자이너 분이 디자인 시스템을 본격적으로 만드시기 시작했는데 (내가 디자이너 시절에 만들었던 시안을 보고 작업하셨다ㅋㅋ..)다른 컴포넌트에 비해 버튼이 특히 매우 다양한 variants가 존재하는 걸 알 수 있다.이렇게 많은 variants들은 단순 prop들로만 관리하기 힘들었고, 나는 대안으로 컴파운드 컴포넌트 패턴을 활용하기로 했다. 이번 글에서는 컴파운드 컴포넌트 패턴과 디자인 시스템을 활용한 Button 컴포넌트를 어떻게 ..

고차 컴포넌트와 컴파운드 컴포넌트 비교와 활용React를 사용하다 보면 컴포넌트 구조를 설계하는 방법으로고차 컴포넌트와 컴파운드 컴포넌트라는두 가지 패턴을 만나게 됩니다. 이 글에서는 두 패턴의 개념, 사용 사례, 그리고 장단점을 비교해 보며,각각을 언제 선택하면 좋은지 살펴보겠습니다.  고차 컴포넌트(Higher-Order Components)개념고차 컴포넌트(HOC)는 하나의 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다.React에서 로직 재사용성을 높이기 위해 사용되는 패턴입니다.const withLoading = (WrappedComponent) => { return (props) => { if (props.isLoading) { return Loading...; ..

가물가물해서 다시 정리

배우게 된 계기사람들이 하도 form 구현 시 React-hook-form이 좋다고 해서언젠가 한 번 써봐야지 했다가 이번에 만드는 초기앱 회원가입에 써보기를 고려하였다. 사실 처음엔 useState와 useEffect가 가장 직관적이지 않나? 이걸로도 충분한데..라는 생각이 지배적이었는데 알고보니 매우 개발자를 편하게 해주는 좋은 라이브러리였다. React-hook-form의 최대 장점: 관리할 상태가 엄청나게 줄어든다.아래는 내가 취업 전 부트캠프 파이널 프로젝트로 했던 코드이다.호텔 예약 매물 양도 플랫폼이 컨셉이었는데, 예약 과정에서 관리해야될 상태들이 너무 많았다.호텔 취소 물품의 1차 가격, 2차 가격, 2차 가격 설정 여부, 계좌등록여부, 은행, 계좌번호, 약관 동의1/2/3/4를 포함해서...

공부하게 된 계기리액트네이티브로 ref를 쓸 때 아래같은 에러가 나올 때가 있다. 딱 봐도 ForwardRef를 쓰라는 얘기같은데자세히 보면 함수형 컴포넌트에선 직접 ref를 받을 수 없다는 얘기다. 지금까지 리액트 웹개발하면서함수형 컴포넌트에서 ref를 props로 잘만 사용해왔는데??? 이상하다. 왜 리액트네이티브에선 이런 에러가 나는가?Warning: Function components cannot be given refs.Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 일단 그전에 props와 ref를 비교해보자. Props와 Ref의 비교props는 데이터와 이벤트 핸들러를 전달하기 위한 용도: prop..

함수 커링이란?함수가 인자를 하나씩 받아가며 최종 결과를 도출하는 함수 패턴이다.아래와 같은 형식이 된다고 생각하면 된다.(params1) => (params2) => { return }도대체 이걸 왜 쓰나.. 싶었는데 가끔 나름 요긴하게 쓰게된다.주로 한 번에 prop을 결정짓지 못할 때 사용하게 된다.(이 단계에서는 이 prop이 결정되고, 저 단계에서는 저 prop이 결정되고...)예시를 들어보겠다. 내가 직면한 문제 - 기존 컴포넌트에 prop을 추가적으로 넣어야하는데 못하는 상황(?)나는 최근에 리액트네이티브의 FlatList를 다뤄야하는 일이 있었다.FlatList는 리액트네이티브가 제공하는 대규모 데이터 배열을 처리하기 위한 스크롤 뷰이다.(뷰포트에 있지 않는 데이터는 렌더하지 않는 win..

forwardRef란?챗지피티의 설명에 따르면, '자식 컴포넌트의 DOM 엘리먼트 또는 클래스 인스턴스에 접근할 수 있도록 하는 기능을 제공한다'라고 한다. 그런데 그냥 쉽게 말해서 '자식 컴포넌트에 ref를 props로 내려줘야'할 때 써야한다. 예를 들어 아래와 같은 경우, ref로 어떤 DOM 요소를 관찰하려고 하는데, 단순 jsx태그가 아니라컴포넌트인 경우 이렇게 ref를 내려줘야한다. 이때 ref라는 이름으로 내려주면 forwardRef를 써야한다는 경고가 나온다. props의 이름으로 아무거나 임의로 쓸 수 있는거 같지만, 'ref'같은 이름은 예약어로 forwardRef를 쓸때만 사용할 수 있는 것이다. 사용법부모 컴포넌트에서 ref를 만들어서 내려준다. (여기서 그냥 inputRef={in..

Next.js 12 Page Router의 커스텀 페이지 레이아웃(getLayout)을 사용하는 것을 보며JSX에 {...props} 식으로 모두 뿌려주는게 대강 모든 Props를 다시 주는것이겠거니하고 넘어갔다.그러나 현재 제대로 한 번 정리할 필요가 있겠다고 생각했다. 1. 하위 컴포넌트에게 객체 속성 전파아래 props라는 객체를 MyCompoent에 props로 넣는 예제이다.const props = { name: 'John', age: 30, location: 'New York'}; 위 코드는 아래 코드와 결과적으로 같다. 그래서 아래처럼 상위 컴포넌트에서 받은 props를 바로 자식 컴포넌트에 내려주는 방식으로 사용 가눙하다.interface MyProps { id: 101, clas..

ReactComponent를 찾을 수 없다는 에러 해결법예전 사이드 프로젝트 진행 도중 UX디자이너 분이 네비게이션 바를 바꾸셨다.react-icons에 있는 기성 아이콘이 아닌 커스텀 svg아이콘을 쓰게 되어 svgr을 쓰게 됐다.그런데 아래 에러가 뜨는 것이다. Module '"*.svg"' has no exported member 'ReactComponent'.Did you mean to use 'import ReactComponent from "*.svg"' instead?  챗지피티에게 물어본 결과, 헛소리밖에 듣지 못했다.아무래도 SVGR의 최신버전을 쓰면서 뭔가 다른 문법으로 바뀐 것으로 의심되었다.찾아보니 SVGR을 4버전 이상으로 이용할 때 svg를 import하는 방식이 달라졌다. 아래..

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다. 퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다. 컴포넌트 재렌더를 막기위한 대표수단 React.memo이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.아래 예시는 이전에 설명한 것처럼 아무런 prop도 ..