패턴으로 익히고 설계로 완성하는 리액트 리뷰(한빛미디어)

“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”

출처: 한빛미디어

책 소개

최근에 어떻게 하면 코드를 더 잘 짤 수 있을지 고민하다가 『패턴으로 익히고 설계로 완성하는 리액트』라는 책을 접했다. 표지의 “패턴”과 “설계”라는 글자가 와닿았고 TDD와 리팩터링으로 계속 코드를 개선하는 가이드를 제시해줄 것이라고 기대했다.

책의 구성 및 내용

이 책은 리액트 애플리케이션 개발 시 자주 발생하는 안티패턴을 정의하고, 이를 해결하기 위한 설계 원칙과 패턴을 제시한다. 특히 TDD(테스트 주도 개발)와 리팩터링을 통해 코드 품질을 높이는 방법을 실용적인 예제를 통해 보여준다.

책은 크게 리액트 기본 개념, 안티패턴 이해하기, 효과적인 패턴과 테스트 방법, 그리고 실제 프로젝트 구현 등의 섹션으로 나누어져 있다.

Part2 테스팅 기법

Part2에서 테스트 방법론 같은 부분은 다른 책과 내용이 비슷했다. 하지만 7장에서 테스트 주도 개발을 제대로 보여줬다. 예시로 ‘코드 오븐’ 애플리케이션을 만들었는데 요구사항 분석과 세분화를 통해 테스트를 먼저 짜놓고 컴포넌트 개발에 들어갔다.

Part3 비즈니스 로직과 디자인 패턴 알아보기

가장 관심있던 부분은 Part3 비즈니스 로직과 디자인 패턴 알아보기였다. 요즘에 비즈니스 로직을 어떻게 잘 분리해서 작성할 수 있을지 고민이 많았기 때문이다. Part3의 내용을 요약해보면 다음과 같다.

ACL(오류 방지 계층)(Anti-Corruption Layer)

ACL은 각각 다른 언어를 사용하는 다른 서브시스템 간의 중재자 역할을 한다. 프론트엔드 ACL은 서버에서 받아 온 데이터를 프론트엔드에서 이해할 수 있는 형태로 변환한다. 그리고 캐시 처리, 오류 변환과 같은 여러 문제를 처리하는 전략 계층으로도 활용할 수 있다.

변환 함수를 사용하면 백엔드에서 주는 데이터 형식이 바뀌더라도 변경의 범위를 변환 함수로 제한할 수 있기 때문에 컴포넌트를 보존할 수 있다.

Context API를 통한 Prop Drilling 문제 해결

보통의 Prop Drilling은 상태값을 넘길 때 일어났지만 예시에서는 함수를 넘길 때의 상황을 다뤘다. 겹겹이 쌓인 컴포넌트에서 자식 컴포넌트의 onClick 함수를 그대로 전달하기 위해 부모 컴포넌트를 무의미하게 거치는 상황을 Context API를 통해 해결했다. 그러면 자식 컴포넌트에서 바로 onClick 함수에 접근이 가능해진다.

단일 책임 원칙

가장 많이 사용되는 기술

render prop

리액트 컴포넌트 간 코드 공유를 위해 함수 prop을 사용

const Title = ({ title, render }) => {
  return <div>{render(title)}</div>
}

부모 컴포넌트가 자식 컴포넌트의 렌더링 로직을 제어할 수 있어 컴포넌트를 더욱 유연하게 하고 재사용할 수 있게 한다.

핵심 로직을 변경하지 않고 컴포넌트 동작을 확장하거나 사용자에 맞게 지정할 수 있다.

합성(composition)

const MyAvatar = () => (
  <Tooltip name="My Avatar">
    <Avatar />
  </Tooltip>
)

예제와 같이 Tooltip 컴포넌트와 Avatar 컴포넌트를 분리함으로써 각자의 역할을 하면서 서로 합성할 수 있다.

Part4 실무에서의 구현

Part4에서는 앞에서 배운 개념들을 가지고 ‘코드 오븐’이라는 피자 가게 애플리케이션을 개발한다. 여기서는 타입을 클래스 기반의 모델로 변환하면서 데이터의 모든 변환 로직을 이곳에 모은다. 그리고 전략 패턴을 통해 할인을 제공하는 등의 요구사항을 개발했다. 이렇게 개발한 코드들을 마지막 계층 구조 챕터에서 봤을 때 유지 보수하기 쉬운 코드가 되었다는걸 알 수 있었다.

정리

책의 난이도는 어렵지 않은 편이라서 프론트엔드 개발자라면 누구나 읽을 수 있을 것이다. 그리고 이론과 실제 예제의 조화가 적절하고 예제가 이론을 이해하는데 큰 도움이 됐다. 어떻게 하면 더 나은 코드를 작성할 수 있을지 고민하고 있다면 큰 도움이 될 거라고 생각한다.