dansoon.log()

자바스크립트+리엑트 디자인패턴 스터디 회고 본문

WIL/Book

자바스크립트+리엑트 디자인패턴 스터디 회고

dansooon 2025. 4. 1. 12:50

들어가며

지난 2개월 동안 '자바스크립트 + 리액트 디자인 패턴'을 읽으며 학습한 내용과 개인적인 깨달음을 공유하려 한다. 현재 진행 중인 프로젝트에서 코드 구조화와 관련된 여러 문제점들을 이해하고자 이 책을 선택했고, 기대 이상의 인사이트를 얻을 수 있었다.

책 소개와 주요 내용

이 책은 리액트 애플리케이션의 설계와 구조화에 초점을 맞추고 있으며, 단순히 컴포넌트를 만드는 방법을 넘어 확장 가능하고 유지보수하기 쉬운 애플리케이션을 구축하는 방법을 다루고 있다. 특히 다음과 같은 내용이 인상적이었다

1. 컴포넌트 패턴의 진화

기존에 알고 있던 HOC(Higher-Order Components)와 Render Props 패턴부터 최신 React Hooks를 활용한 패턴까지 리액트의 발전 과정에 따른 디자인 패턴의 변화를 깊이 있게 다루고 있다. 각 패턴의 장단점을 실제 코드 예시와 함께 설명하여 상황에 맞는 패턴을 선택할 수 있는 기준을 제시해준다.

// 책에서 소개된 커스텀 훅 패턴 예시
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 초기값 설정

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

2. 상태 관리 전략

리액트 애플리케이션에서 가장 중요한 부분 중 하나인 상태 관리에 대해 깊이 있게 다루고 있다. 단순한 useState부터 useReducer, Context API, 그리고 외부 라이브러리인 Redux, MobX, Recoil까지 다양한 상태 관리 방법을 비교 분석하고 있어 프로젝트 규모와 복잡도에 따라 적절한 선택을 할 수 있게 도와준다.

특히 상태 관리의 분리와 관심사 분리(Separation of Concerns)에 대한 내용이 실무에 즉시 적용 가능했다.

3. 성능 최적화 패턴

리액트 애플리케이션의 성능을 최적화하는 다양한 패턴을 소개하고 있다. 불필요한 렌더링을 방지하기 위한 메모이제이션 기법(React.memo, useMemo, useCallback), 코드 스플리팅과 지연 로딩(lazy loading), 가상화(virtualization) 등의 기법을 실제 사례와 함께 설명해 주어 매우 유용했다.

패턴에 대한 깨달음

이 책의 가장 큰 수확은 그동안 내가 직관적으로 작성해왔던 코드 패턴들이 실제로는 잘 정립된 디자인 패턴이었다는 것을 깨달은 점이다. 개발자로서 경험이 쌓이면서 자연스럽게 발전시켜온 코딩 방식이 책에서 체계적으로 설명하는 패턴과 일치한다는 사실이 흥미로웠다.

1. 내가 무의식적으로 사용했던 컴포넌트 패턴

그동안 코드의 재사용성을 높이기 위해 직관적으로 작성했던 방식이 사실은 Compound Component 패턴과 유사했다는 것을 알게 되었다. 특히 폼 요소를 구성할 때 자주 사용했던 패턴이 책에서 설명하는 모범 사례와 일치했다.

// 내가 자주 사용하던 패턴 (Compound Component와 유사)
function Select({ children, value, onChange, ...props }) {
  return (
    <select value={value} onChange={onChange} {...props}>
      {children}
    </select>
  );
}

Select.Option = function Option({ children, value, ...props }) {
  return (
    <option value={value} {...props}>
      {children}
    </option>
  );
};

// 사용 예시
<Select value={selectedValue} onChange={handleChange}>
  <Select.Option value="option1">옵션 1</Select.Option>
  <Select.Option value="option2">옵션 2</Select.Option>
</Select>

2. 상태 관리에 대한 재발견

상태 관리에 있어서도 복잡성을 느낄 때마다 직관적으로 상태를 분리하고 캡슐화했던 방식이 책에서 설명하는 "최소 상태 원칙"과 일맥상통한다는 것을 알게 되었다. 특히 파생 상태를 별도로 저장하지 않고 계산하는 방식을 선호했는데, 이것이 리액트의 권장 패턴이라는 사실이 반가웠다.

3. 성능 최적화 방식의 재확인

불필요한 리렌더링을 줄이기 위해 사용했던 메모이제이션 방식이 책에서 설명하는 성능 최적화 패턴과 일치한다는 것도 새롭게 배웠다. 특히 useMemo와 useCallback을 사용하는 상황에 대한 가이드라인이 내 직관과 일치했다는 점이 인상적이었다.

느낀 점 및 배움

이 책을 통해 그동안 직관과 경험에 의존해 작성했던 코드들이 실은 잘 정립된 패턴이었다는 것을 알게 되었다. 특히 다음과 같은 점이 인상 깊었다

  1. 패턴의 이름과 의미: 무의식적으로 사용하던 코딩 방식에 이름이 있고, 그 뒤에는 잘 정리된 이론적 배경이 있다는 사실을 알게 되었다. 이제 "이건 컴포지션 패턴이야" 또는 "이건 커스텀 훅 패턴으로 해결하면 좋겠네"와 같이 구체적인 개념으로 생각할 수 있게 되었다.
  2. 관심사 분리의 재확인: 직관적으로 UI 로직과 비즈니스 로직을 분리하려 했던 내 접근 방식이 실제로 좋은 패턴이었다는 것을 확인하게 되었다. 특히 관심사 분리가 리액트의 핵심 철학 중 하나라는 점을 다시 한번 깨달았다.
  3. 성능과 가독성의 균형: 성능과 가독성 사이에서 고민했던 내 접근 방식이 결국은 균형 잡힌 좋은 방법이었음을 확인했다. 항상 모든 것을 메모이제이션하는 것이 아니라 필요한 상황에서만 최적화하는 방식이 권장된다는 점이 내 직관과 일치했다.

앞으로의 생각

이 책을 통해 무의식적으로 사용하던 패턴들에 이름과 체계가 있다는 것을 알게 되었고, 이제는 더 의식적으로 패턴을 선택하고 적용할 수 있게 되었다. 앞으로 코드를 작성할 때 다음과 같은 부분에 더 주의를 기울이고 싶다

  1. 상황에 맞는 적절한 패턴을 의식적으로 선택하기
  2. 팀원들과 패턴에 대한 공통 언어로 소통하기
  3. 패턴의 장단점을 고려하여 더 효율적인 코드 작성하기

결론

"자바스크립트 + 리액트 디자인 패턴" 책은 내가 그동안 경험적으로 발전시켜온 코딩 방식에 이름을 붙이고 체계화해주는 소중한 경험이었다. 무의식적으로 사용하던 패턴들이 왜 좋은 방식인지, 어떤 상황에서 더 적합한지에 대한 이론적 배경을 알게 된 것이 가장 큰 수확이다.

이 책의 매력은 개발자의 경험 수준에 따라 다른 가치를 제공한다는 점이다. 리액트를 처음 접하는 개발자에게는 "이런 패턴이 있구나!"라는 새로운 지식과 접근법을 알려주고, 어느 정도 리액트 개발 경험이 있는 중급 이상의 개발자에게는 "아, 내가 그동안 이런 패턴을 사용하고 있었구나!"라는 깨달음을 줄 수 있을 것 같다.