Tistory
일반적인 리액트 라이브러리 아키텍처
리액트 생태계에서 흔히 사용되는 라이브러리들이 내부적으로 어떤 아키텍처 패턴을 따르는지 분석한 글로, 컨텍스트 프로바이더 패턴, 커스텀 훅 패턴, 합성 컴포넌트 패턴 등을 설명합니다. 라이브러리 아키텍처를 이해하면 자신이 만드는 컴포넌트와 훅을 더 확장 가능하고 재사용 가능하게 설계하는 데 도움이 됩니다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 리액트 생태계에서 흔히 사용되는 라이브러리들이 내부적으로 어떤 아키텍처 패턴을 따르는지 분석한 글로, 컨텍스트 프로바이더 패턴, 커스텀 훅 패턴, 합성 컴포넌트 패턴 등을 설명합니다. 라이브러리 아키텍처를 이해하면 자신이 만드는 컴포넌트와 훅을 더 확장 가능하고 재사용 가능하게 설계하는 데 도움이 됩니다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 합성 컴포넌트(Compound Components) 패턴은 관련 컴포넌트들을 하나의 API로 묶어 유연성을 제공한다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
합성 컴포넌트
합성 컴포넌트(Compound Components) 패턴은 관련 컴포넌트들을 하나의 API로 묶어 유연성을 제공한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
합성 컴포넌트를 개념으로만 기억하고 맥락 없이 적용하면 합성 컴포넌트(Compound Components) 패턴은 관련 컴포넌트들을 하나의 API로 묶어 유연성을 제공한다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
커스텀 훅 패턴으로 로직을 UI에서 분리하면 테스트
커스텀 훅 패턴으로 로직을 UI에서 분리하면 테스트 용이성과 재사용성이 높아진다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
커스텀 훅 패턴으로 로직을 UI에서 분리하면 테스트를 개념으로만 기억하고 맥락 없이 적용하면 커스텀 훅 패턴으로 로직을 UI에서 분리하면 테스트 용이성과 재사용성이 높아진다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
Context + Provider 패턴은 prop
Context + Provider 패턴은 prop drilling 없이 하위 컴포넌트에 상태를 전달한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Context + Provider 패턴은 prop 를 개념으로만 기억하고 맥락 없이 적용하면 Context + Provider 패턴은 prop drilling 없이 하위 컴포넌트에 상태를 전달한다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
읽는 순서
- 1이론
"일반적인 리액트 라이브러리 아키텍처"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
일반적인 리액트 라이브러리 아키텍처에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "합성 컴포넌트(Compound Components) 패턴이란 무엇이며, 언제 사용하면 좋은가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "일반적인 리액트 라이브러리 아키텍처에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] Select/Option, Tabs/Tab 같은 컴포넌트들이 Context를 통해 암묵적으로 상태를 공유하는 방식입니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "일반적인 리액트 라이브러리 아키텍처에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 단일 책임, 순수성, 명시적 의존성, 테스트 가능성 등을 고려하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "일반적인 리액트 라이브러리 아키텍처에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] Context 값이 바뀌면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링됩니다. 분리나 메모이제이션으로 해결합니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"합성 컴포넌트"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.