My Boundary As Much As I Experienced

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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

보호되어 있는 글입니다.

보호되어 있는 글입니다.

가물가물해서 다시 정리

배우게 된 계기사람들이 하도 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..