클린 코드 리액트: 판단 기준 만들기
문법이 아닌 판단 기준으로 React 코드를 평가하는 사고법을 다루는 서론
클린 코드 리액트란 무엇인가
— 문법을 넘어, 판단 기준을 만드는 강의
서론: 왜 ‘클린 코드 리액트’가 필요한가
React를 어느 정도 써본 개발자라면 비슷한 경험이 있다.
코드는 잘 돌아간다. 기능도 요구사항을 만족한다.
그런데 조금만 수정하려고 하면 손대기 싫어지고,
다른 사람이 코드를 보면 설명하는 데 시간이 걸린다.
이 지점에서 문제가 되는 것은 React 문법 숙련도가 아니다.
문제는 “이 코드가 왜 나쁜지”, “어디까지가 허용 가능한지”를 판단하는 기준이 없다는 것이다.
‘클린 코드 리액트’는 문법을 더 알려주는 강의가 아니다.
이 강의의 본질은 React 코드를 평가하는 사고 기준을 강제로 주입하는 것이다.
실무 체크리스트 (서론)
- “이 코드가 왜 문제인지” 한 문장으로 설명할 수 있는가
- 동작 이유가 아니라 구조 선택 이유를 말할 수 있는가
- 기능 추가 전에 “이 구조로 버틸 수 있는가”를 먼저 생각하는가
- 코드 리뷰에서 취향이 아니라 근거로 이야기하고 있는가
- 리팩터링의 목적이 명확한가 (가독성 / 변경 비용 / 테스트)
1. 이 강의가 다루지 않는 것 vs 집요하게 다루는 것
이 강의가 다루지 않는 것
- 최신 React API 전체 정리
- 멋있어 보이는 패턴 모음
- “이렇게 하면 무조건 정답” 같은 처방전
- 대규모 아키텍처 설계 이론
이 강의가 집요하게 다루는 것
- 지금 당장은 괜찮아 보이지만, 나중에 문제 되는 코드
- 초보자가 무의식적으로 반복하는 안티 패턴
- “왜 이런 코드를 쓰게 되었는가”라는 사고 과정
- 더 나은 선택지를 고르는 기준
핵심은 이것이다.
이 강의는 코드를 고쳐주지 않는다. 대신 판단력을 고친다.
실무 체크리스트
- “이 패턴을 왜 썼는지” 설명할 수 있는가
- 나중에 바뀔 가능성이 높은 부분을 분리했는가
- 지금은 작지만 커질 때의 비용을 고려했는가
- 코드가 아니라 사고 습관을 교정하려는가
- 베껴 쓴 코드에 대해 스스로 의심해본 적이 있는가
2. “동작하는 코드”와 “유지보수 가능한 코드”의 차이
초보 단계에서는 이 둘이 잘 구분되지 않는다.
왜냐하면 지금 당장 돌아가면 성공이라고 배우기 때문이다.
하지만 실무에서 코드는 다음 과정을 겪는다.
- 요구사항이 추가된다
- 상태가 늘어난다
- 조건 분기가 생긴다
- 다른 사람이 수정한다
이때 문제가 되는 코드는 대체로 이런 특징을 가진다.
- 상태가 어디서 바뀌는지 한눈에 안 보인다
- Props가 왜 필요한지 설명하기 어렵다
- 컴포넌트의 책임이 애매하다
즉, 유지보수 가능한 코드란 “변경 지점을 예측할 수 있는 코드”다.
클린 코드 리액트는 이 차이를 계속해서 들춰낸다.
실무 체크리스트
- 이 코드에서 가장 먼저 바뀔 부분은 어디인가
- 상태 변경 흐름을 말로 설명할 수 있는가
- 컴포넌트 이름만 보고 역할이 추측되는가
- 조건이 하나 늘어나도 구조가 무너지지 않는가
- 테스트 없이도 동작을 예측할 수 있는가
3. 요즘 리액트의 전제에 대한 흔한 오해
오해 1: 함수 컴포넌트 = 단순하다
함수 컴포넌트는 간단해 보이지만,
상태와 Effect가 섞이는 순간 복잡도가 급격히 증가한다.
단순한 문법이 단순한 구조를 보장하지 않는다.
오해 2: Hooks는 자유롭게 써도 된다
Hooks는 편의 기능이 아니라 강한 제약이 있는 API다.
순서, 의존성, 책임 분리가 어긋나는 순간 버그는 조용히 쌓인다.
오해 3: 선언형 UI는 생각을 덜 해도 된다는 뜻이다
선언형은 “알아서 해준다”가 아니다.
무엇을 상태로 둘지, 무엇을 계산으로 남길지 더 많이 고민해야 한다는 뜻이다.
실무 체크리스트
- 이 값은 상태여야 하는가, 계산 결과인가
- Effect는 정말 사이드 이펙트인가
- Hooks 사용 이유를 문장으로 말할 수 있는가
- 선언형이라는 말 뒤에 판단을 숨기고 있지 않은가
- 구조적 복잡도를 API로 덮고 있지 않은가
4. 이 시리즈를 어떻게 활용해야 하는가
이 강의와 블로그 시리즈는 처음부터 끝까지 읽는 교과서가 아니다.
수강 전
- 전체 글을 빠르게 훑으며 “문제의 유형”을 익힌다
- React 코드에서 무엇을 경계해야 하는지 감각을 만든다
수강 중
- 강의 제목과 블로그 소제목을 매칭한다
- “아, 이 얘기였구나” 하고 사고를 연결한다
수강 후
- 문제가 생겼을 때 안티 패턴 사전처럼 검색한다
- 코드 리뷰 기준 문서로 활용한다
실무 체크리스트
- 강의를 ‘완강’보다 ‘재사용’ 관점으로 보는가
- 문제 상황에서 다시 참고할 수 있는가
- 메모와 기준을 스스로 정리하고 있는가
- 코드 리뷰에 바로 써먹을 수 있는가
- 학습 결과가 행동 변화로 이어지는가
결론: 이 시리즈를 읽는 독자의 태도 가이드
이 시리즈의 목표는 “잘 짜는 법”을 알려주는 것이 아니다.
“어떤 선택을 경계해야 하는지”를 몸에 새기게 만드는 것이다.
- 빠르게 만들되, 대충 판단하지 말 것
- 패턴을 쓰되, 이유 없이 쓰지 말 것
- 돌아간다는 이유로 구조를 정당화하지 말 것
React 실력이 느는 순간은
새 API를 알았을 때가 아니라,
나쁜 코드를 보고 이유를 설명할 수 있게 될 때다.
- 참고: 클린코드 리액트(React)