들어가며 7월부터 주 5일, 하루 30분씩 개발 탐구를 하는 시간을 가져보자라는 습관 만들기를 시작했고, 5일을 채우지 못할 때가 있어도 느슨하게 지속해나가고 있다. 매일 사용하는 React와 더 친해져보고 싶다는 생각이 들어 내부 구현에 대한 아티클을 하나 둘씩 찾아 읽어보다가 이미 유명한 Dan abramov의 블로그의 글 A Complete Guide to useEffect에서 useEffect는 lifecycle보다는 data의 동기화 메커니즘으로 바라보아야 한다는 문장에 제대로 꽂혔다. To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events. 그 전까진 useEffect는 대략 lifecycle, dependency에 따라 실행된다라고 뭉뚱그려 알고있던 …

들어가며 최근 소속된 개발자 커뮤니티의 네트워킹 행사에서 반복되는 분기처리에 전략패턴 도입하기라는 제목으로 발표를 했다. 주제를 정해 발표 자료를 준비하고 피드백을 요청해 다듬어나간 경험만으로도 즐겁고 알찬 경험이었지만, 글로도 남겨보면 더 오래오래 남을 것 같아 블로그에도 정리해본다. 전략패턴에 관심을 가지게 된 계기 인력 관리 솔루션의 출퇴근 기능을 담당하며 다양한 근태 타입과 사용자 권한에 따른 따른 분기처리가 필요했다. 서비스 특성상 스케줄 등 다른 기능을 개발하는 팀원이 내 코드를 참고할 일도 있을 것이고, 추후 요구사항이 변동될 가능성도 있어(세상엔 내 생각보다 다양한 근태 유형이 존재했다..) 가독성과 유지보수에 대한 고민이 많았다. 머릿속을 스쳐지나간 절망편 시나리오들··· 고민을 이어나가던 도중 개발 커뮤니티에서 보았던 디자인 패턴은 내 코드를 공용어로 만든다는 문장이 떠올랐고, 이를 인사이트 삼아 디자인 패턴을 적용해보자는 생각이 들었다. 디자인 패턴 Desi…

본 글은 원글 patterns - HOC Pattern을 학습용으로 번역한 것입니다. 고차 컴포넌트 패턴 애플리케이션에서 여러 컴포넌트에 동일한 로직을 사용하고자 할 때가 있습니다. 이 로직에는 컴포넌트에 특정한 스타일링을 적용시키는 것, 권한 요구, 전역 상태룰 추가하는 것 등이 포함될 수 있습니다. 여러 컴포넌트에서 같은 로직을 재사용할 수 있도록 하는 방법 중 하나는 고차 컴포넌트 패턴을 사용하는 것입니다. 이 패턴으로 애플리케이션 전체에서 컴포넌트 로직을 재사용할 수 있습니다. 고차 컴포넌트(HOC)는 또다른 컴포넌트를 전달받는 컴포넌트입니다. 고차 컴포넌트는 매개변수로 전달하는 컴포넌트에 적용시키고자 하는 특정 로직을 포함하고 있습니다. 해당 로직을 적용한 후, 고차 컴포넌트는 추가적인 로직이 포함된 요소를 반환합니다. 애플리케이션에서 여러 컴포넌트에 특정한 스타일링을 추가하고 싶다고 가정해봅시다. 매번 로컬에서 style 객체를 만드는 대신, 전달하는 컴포넌트에 …

본 글은 원글 patterns - Compound Pattern을 학습용으로 번역한 것입니다. 들어가며 라는 문장에 깊은 감명을 받았던 최근.. patterns에 정리된 패턴 하나하나를 뽀개보려 한다. 원문 자체가 단순한 영문으로 이루어져 있지만 이해한 후 다시한번 정리해내는 경험 또한 유익할거란 생각. 첫 주자는 ! Compound Pattern 우리의 애플리케이션엔 종종 서로 관련된 컴포넌트들이 있습니다. 이것들은 공유된 상태를 통해 서로 의존하고, 로직을 공유합니다. 이는 select, dropdown, menu item과 같은 컴포넌트에서 자주 볼 수 있습니다. compound component pattern을 사용하면 특정 작업을 수행하기 위해 함께 작동하는 컴포넌트를 만들 수 있습니다. Context API 예를 들어봅시다: 우리는 다람쥐 사진 목록이 있습니다! 단순히 다람쥐 사진을 보는 것을 넘어서, 우리는 유저가 사진을 수정하거나 삭제하는 버튼을 추가하고자 합니다. …

들어가며 업무 중 react-hook-form을 사용하다보니 공식문서에 기재된 best practice뿐만 아니라 이런 저런 방법으로 응용이 필요했다. 나름의 방법으로 고심해보며 중간중간 드는 궁금증들은 실제 구현된 코드도 찾아보며 해결해보기도 했다. 그 여정을 간단히 기록해보는 글. react-hook-form은 앞으로도 계속해서 사용할테니 아래 내용은 더 추가될 예정. 서로 다른 컴포넌트에서 form 상태 공유하기 한 파일 안에 모든 input이 존재해 form data가 관리되는 형태라면 큰 어려움이 없겠지만, component 단위로 개발하는 react 특성상 form data를 공유하는 여러 component가 존재할 수 있다. React Hook Form은 React의 Context API를 활용해 서로 다른 컴포넌트 간에도 form의 상태를 공유하는 custom hook 와 컴포넌트를 제공한다. 각각 코드로 살펴보자. FormProvider, form 태그 외부에서…

들어가며 Typescript로 개발을 하다보면 자주 마주치는 타입 ReactNode, JSX.Element 그리고 ReactElement. 어느 날 문득 나는 각 타입의 차이를 명확히 설명할 수 있나라는 의문이 들었고, 그 대답은 아니다였기에 정리해본다. ReactNode 위 코드를 보면 알 수 있듯이 Javascript 데이터 타입 대부분을 아우르는 타입으로, 아래에서 설명할 ReactElement 역시 포함한다. 정확히 어떤 타입을 prop으로 받을지 확실치않을 때, 혹은 어떤 타입이라도 허용 가능하게 하고싶을 때 any대신 ReactNode를 활용할 수 있다. ReactElement와 JSX.Element 와 는 모두 React.createElement()의 리턴 타입이라는 공통점을 가진다. 이를 더 정확히 알기 위해선 JSX에 대한 배경지식이 필요하니 간략하게 짚고 넘어가보자. JSX JSX는 Javascript의 확장 문법으로, Javascript 파일 하나에 렌더링…

들어가며 우리는 종종 숫자를 count하는 애니메이션을 접하게된다. 예를 들어 게임 화면에서 유저가 획득한 포인트를 보여줄 때, 할인된 가격을 안내할 때, D-day까지 남은 일수를 보여줄 때 등등 숫자값을 강조해야하는 상황에서 자주 사용된다. 그럼 이 애니메이션은 어떻게 구현해야할까? 단순한 count 애니메이션을 생각하고 setInterval로 금방 구현하겠네!하며 호기롭게 접근했다가 count 속도를 조절하는 방법이 까다로워 혼쭐이 나 그 여정을 기록해보고자 한다. 해당 기능은 재사용성을 고려해 custom Hook으로 구현했다. 1. setInterval 함수로 애니메이션 구현 우선 단순히 숫자를 count하는 애니메이션부터 구현해보자. 숫자를 카운트하는 애니메이션은 일정 기간동안 특정 작업을 반복 실행하는 setInterval 함수로 구현할 수 있다. setInterval 함수의 구조 및 사용예시는 아래와 같다. 이를 이용해 우선 동일한 속도로 숫자를 count하는 cus…

한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란 React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. ‘부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드’ 라는 표현의 예시를 들어보자면, 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 이때의 modal은 부모 컴포넌트(root)의 DOM 계층 구조 바깥에 있는 DOM 노드라고 할 수 있다. react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있는데 이런 tree구조는 종종 불편함을 가져다주기도 한다. …