Velog
리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술
SOLID 원칙 중 단일 책임 원칙(SRP)을 리액트 컴포넌트 설계에 적용하는 방법을 실용적인 예시와 함께 설명하는 글입니다. 하나의 컴포넌트가 하나의 명확한 책임만 가져야 한다는 원칙을 통해 재사용성, 테스트 용이성, 유지보수성을 높이는 컴포넌트 분리 전략을 제시합니다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. SOLID 원칙 중 단일 책임 원칙(SRP)을 리액트 컴포넌트 설계에 적용하는 방법을 실용적인 예시와 함께 설명하는 글입니다. 하나의 컴포넌트가 하나의 명확한 책임만 가져야 한다는 원칙을 통해 재사용성, 테스트 용이성, 유지보수성을 높이는 컴포넌트 분리 전략을 제시합니다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 단일 책임 원칙(SRP)은 컴포넌트가 변경되는 이유가 오직 하나여야 함을 의미한다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
단일 책임 원칙
단일 책임 원칙(SRP)은 컴포넌트가 변경되는 이유가 오직 하나여야 함을 의미한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
단일 책임 원칙를 개념으로만 기억하고 맥락 없이 적용하면 단일 책임 원칙(SRP)은 컴포넌트가 변경되는 이유가 오직 하나여야 함을 의미한다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
데이터 fetching
데이터 fetching, 비즈니스 로직, UI 렌더링을 분리하면 각 관심사를 독립적으로 변경할 수 있다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
데이터 fetching를 개념으로만 기억하고 맥락 없이 적용하면 데이터 fetching, 비즈니스 로직, UI 렌더링을 분리하면 각 관심사를 독립적으로 변경할 수 있다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
커스텀 훅은 상태 로직을 컴포넌트에서 분리하는 핵심
커스텀 훅은 상태 로직을 컴포넌트에서 분리하는 핵심 도구다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
커스텀 훅은 상태 로직을 컴포넌트에서 분리하는 핵심를 개념으로만 기억하고 맥락 없이 적용하면 커스텀 훅은 상태 로직을 컴포넌트에서 분리하는 핵심 도구다 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
읽는 순서
- 1이론
"리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "리액트 컴포넌트에 단일 책임 원칙을 적용한다는 것은 실제로 어떤 의미인가요? 예시를 들어 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 데이터 fetching, 로직 처리, 화면 출력을 각각 다른 계층(훅, 컨테이너, 프레젠테이션 컴포넌트)으로 분리하는 예를 드세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 파일이 너무 길어짐, 테스트하기 어려움, props 개수가 너무 많음, 변경할 이유가 여러 가지인 경우가 신호입니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "리액트에서의 단일 책임 원칙: 컴포넌트 집중의 기술에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 훅 이전에는 클래스 컴포넌트로만 가능했지만, 이제는 커스텀 훅으로 로직 분리가 가능해 구조가 단순해졌습니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"단일 책임 원칙"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.