구식 React 코드 이해하기: “Classy Weather” 구축을 통해 배운 점

Source: Dev.to

지난 며칠 동안 Classy Weather라는 작은 프로젝트를 진행했습니다. 목표는 새로운 것이나 최신 기술을 배우는 것이 아니었습니다. 목표는 단순하지만 불편했습니다: 클래스 컴포넌트로 작성된 오래된 React 코드베이스를 이해하는 것.

그전까지는 함수형 컴포넌트와 훅만 사용해 왔습니다. JavaScript 클래스는 알았기에 클래스 컴포넌트도 자연스럽게 느껴질 거라 생각했죠. 하지만 실제로 코드를 읽고 작성하면서 중요한 사실을 깨달았습니다: JavaScript 클래스를 아는 것과 React 클래스 컴포넌트를 이해하는 것은 전혀 다른 일.

이 프로젝트는 저에게 속도를 늦추고, 코드를 꼼꼼히 읽으며, 훅이 존재하기 전 React가 어떻게 동작했는지를 이해하도록 강요했습니다.

왜 다시 클래스 컴포넌트로 돌아갔는가

실제 업무에서는 언제나 최신, 모던한 코드베이스만 다루는 것이 아닙니다. 많은 기업이 클래스 컴포넌트로 작성된 대규모 React 앱을 아직도 유지하고 있습니다. 그 코드를 읽거나 유지보수할 수 없다면 개발자로서의 한계가 생깁니다.

그래서 저는 Classy Weather라는 작은 날씨 앱을 오직 클래스 컴포넌트만 사용해 만들었습니다:

• API에서 데이터 가져오기
• 마지막 검색 위치를 localStorage에 저장
• 로딩 상태 표시
• 상태가 변할 때 UI 업데이트

처음 코드를 보면 낯설었습니다. useState와 useEffect 대신 모든 것이 다음 안에서 이루어졌습니다:

• state = { ... }
• componentDidMount
• componentDidUpdate
• componentWillUnmount

오늘날 훅이 해주는 일을 우리는 과거에 라이프사이클 메서드를 직접 사용해 구현했다는 것을 깨달았습니다.

나를 혼란스럽게 했던 것 (그리고 결국 이해하게 된 것)

가장 큰 혼란은 훅을 라이프사이클 메서드에 머릿속으로 매핑하는 것이었습니다:

• useEffect(..., []) → componentDidMount
• 의존성을 가진 useEffect → componentDidUpdate
• 정리 함수 → componentWillUnmount

또 다른 어려운 점은 클래스 컴포넌트에서는 state가 기본적으로 함수형으로 업데이트되지 않는다는 점이었습니다. React가 언제 다시 렌더링하는지에 대해 신중히 생각해야 합니다.

앱의 데이터 흐름을 따라가 보니:

1. 사용자가 위치를 입력 → state.location이 업데이트
2. componentDidUpdate가 변화를 감지 → 날씨를 다시 가져옴
3. UI가 재렌더링

…모든 것이 이해되기 시작했습니다.

그리고 저 자신에 대해 솔직하게 깨달은 점이 하나 더 있습니다:

제가 혼란스러웠던 이유는 클래스 컴포넌트가 나쁘기 때문이 아니라, 오래된 React 코드를 진지하게 읽어본 적이 없었기 때문입니다.

진짜 교훈: 왜 이것이 저를 더 나은 개발자로 만들었는가

이 프로젝트가 저를 “클래스 컴포넌트에 더 능숙하게” 만든 것은 아닙니다. 오히려 다른 사람이 작성한 코드를 읽는 능력이 향상되었습니다.

이제 오래된 React 코드베이스를 볼 때 당황하지 않습니다. 다음을 파악할 수 있습니다:

• 부수 효과가 어디에 있는지
• 상태 변화가 어디서 일어나는지
• 컴포넌트 라이프사이클 흐름
• UI가 상태에서 어떻게 파생되는지

이것이 진정한 스킬입니다.

프레임워크는 변하고, 문법도 변합니다. 하지만 기존 코드베이스를 이해하는 능력이 개발자로서 여러분을 가치 있게 만드는 핵심입니다.

Classy Weather는 날씨 앱을 만드는 것이 목적이 아니었습니다. 다른 사람의 코드 속에서 사고하는 법을 배우는 것이 목표였죠. 이는 실제 현장에서 반드시 필요하게 될 스킬임을 저는 확신합니다.