2015년. 리액트의 아부지 Dan Abramov는 Container / Presentational 두 가지의 구분을 통해 컴포넌트를 작성하는 패턴에 대해 글을 작성했다. 4년 후인 2019년. 그는 사람들이 자신이 소개한 패턴에 얽매여 맹목적으로 사용하는 것을 보며 깊은 현타가 왔고, hooks를 사용하면 렌더링과 상태 관리에 대한 분리가 가능하기 때문에 더 이상 이 패턴을 권장하지 않는다는 글을 남겼다. 그가 이야기한 컨테이너와 프레젠테이션 컴포넌트의 구분은 사실 세부 구현보다도 목적성에 의해 잘 드러난다. 프레젠테이션 컴포넌트 UI를 표현하는 것을 목적으로 함 상태가 없거나 극히 제한적 순수 컴포넌트(사이드 이펙트가 없는 순수 함수)를 지향 컨테이너 컴포넌트 로직을 관리하는 것을 목적으로 함 상..

React 16.8에서 소개되었던 Hook API 중에서는 useRef는 제외한다면 최적화와 관련된 훅이 2개(useMemo, useCallback)가 있다. Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그중에서도 useCallback은 함수를 메모이제이션 하기 위해 사용하는 훅이다. 함수를 메모이제이션 하는 목적은 대개 성능의 최적화이고, 특히 리액트에서는 주로 메모이제이션 컴포넌트의 props로 넘기는 이벤트 핸들러 등의 함수가 불필요하게 재 생성되어 불필요한 렌더링이 일어나지 않게끔 사용한다. 그런데 우리가 useCallback을 사용하는 경우를 생각해보면, 빈 의존성 배열로 사..

반응형 컴포넌트 React를 사용해서 반응형 웹을 만들어 본 사람이라면, 반응형 레이아웃에 대응하기 위해 아래와 같은 컴포넌트(혹은 비슷한 역할을 하는 컴포넌트)를 만들어 본 경험이 있을 거라 생각한다. 예시 1 레이아웃에 따라 렌더링 할 컴포넌트를 분기하는 Switch 컴포넌트 예시 2 children의 노출 여부를 명시하는 Display 컴포넌트 두 컴포넌트의 공통점은 무엇일까? 바로 반응형 레이아웃에 대한 처리를 JSX내부에서 바로 확인할 수 있게끔 컴포넌트화 했다는 점이다. 별도의 스타일 코드로 이동해 확인할 필요가 없고, 직관적으로 어떤 컴포넌트들이 반응형에 따른 분기 처리가 되는지 알 수 있으니 장점이 많다 하겠다. 테스트 코드와 함께 사용 시 발생하는 문제점 하지만 이 컴포넌트는 아쉽게도 테..

React Testing 💡 Jest, ReactTestingLibrary로 Testing 환경을 구축했던 경험을 공유한다. 도입 취지 TDD(Test Driven Development)가 아니라도 테스트를 통해 비즈니스의 핵심 로직 검증만이라도 가능하다면, 코드의 리팩토링이나 기능의 추가, 수정 시에 더욱 안정성을 가질 수 있다고 생각되었음. 공통적인 테스트 코드 환경 구축 및 컨벤션이 있다면 최소한의 노력으로 최대한의 효과를 볼 수 있을거라 기대됨. 환경 구축 설치 💡 CRA기준으로는 이미 jest가 설치되어 있고, 다른 툴체인에서는 jest를 설치해준다. 그 외 설치 필요한 항목 yarn add@testing-library/react@types/jest ts-jest @testing-library/..

Mock Data의 필요성 프론트엔드 개발을 하는 입장에서는 백엔드 API가 이미 다 준비되어 있고, 인터페이스도 공유가 된 상태에서 작업을 시작하는 게 최고의 상황일 것이다. 그러나 세상일이 늘 그렇듯 상황이 원하는 대로 흘러가지는 않는 법. 꽤나 빈번한 상황에서 프론트 개발자는 백엔드의 인터페이스만 공유받거나, 혹은 그마저도 공유받지 못한 상황에서 개발을 시작해야 한다. 필자는 이런 상황에서 미리 Mock API를 만들어 내부적인 테스트를 먼저 진행하고, 추후 백엔드 API가 나오면 Mock API와 교체하는 방식으로 프로젝트에 소요되는 시간을 최대한 아끼려고 노력하였다. 다행히 Typescript를 사용하면서 API의 요청과 응답 값을 미리 Typing 해 놓을 수 있었기 때문에 요청 값과 응답 값..

Shadow Dom 이란? > 웹 컴포넌트 캡슐화를 위해, lite 버전의 dom을 생성하는 것 실제로 흔하게 사용되는 shadow dom을 보고 싶다면? 개발자 도구 → Settings → Preferences → Elements → Show user agent shadow DOM 체크 range input이 shadow dom으로 이루어져 있다는 걸 볼 수 있다. 하나의 html element가 자체 스코프를 가진 shadow root을 생성하고, 그 안에서 div들로 구현된 range 가 실제로 구현된다. (shadow dom 자체가 하나의 dom이기 때문에, id="track", id="thumb"는 상위 dom의 id와 무관하게 선언해서 사용이 가능하다) 위 예시는 shadow DOM을 포함하는..