React 클래스 컴포넌트 이해하기: 오래된 코드베이스가 더 이상 나를 두렵게 하지 않는 이유 🤫

Source: Dev.to

Overview

오늘 배운 내용은 새로운 React 코드를 작성하는 것이 아니라
기존 React 코드를 이해하는 것이었습니다.

저는 이미 JavaScript 클래스를 알고 있었습니다. 이전에 공부했기 때문에 클래스 컴포넌트 자체가 문법적으로 “새로운” 것은 아니었죠. 하지만 React 클래스 컴포넌트를 읽기 시작하면서 깨달았습니다:

이것은 단순히 JavaScript 클래스가 아닙니다. 클래스 위에 구축된 React의 옛 사고 모델입니다.

이것을 이해하는 데 시간이 걸렸습니다.

클래스 컴포넌트를 처음 보았을 때 저는 “이게 뭐다 새로운 거야?” 라고 생각하지 않았습니다. “음, React 안에서 쓰이는 JS 클래스구나.” 라고 생각했죠. 그리고 그것은 사실입니다.
하지만 React는 그 위에 자체 개념을 추가합니다:

• this.state
• this.setState
• componentDidMount, componentDidUpdate, componentWillUnmount 같은 라이프사이클 메서드

그래서 문법은 익숙했지만 React의 동작 모델은 달랐습니다. 실제 어려움은 클래스를 배우는 것이 아니라 React가 클래스를 어떻게 사용하는가를 이해하는 것이었습니다.

Mapping Old Ideas to New Ones

가장 큰 깨달음은 옛 개념을 새 개념에 매핑하기 시작했을 때였습니다:

• useState ≈ this.state와 this.setState
• useEffect ≈ 라이프사이클 메서드
• 정리 함수 ≈ componentWillUnmount

그때 비로소 이해가 되었습니다: Hooks가 새로운 개념을 만든 것이 아니라 옛 개념을 단순화하고 통합한 것이었습니다. 이를 이해하면 옛 React와 새 React 모두가 훨씬 명확해집니다.

Why Understanding Old React Matters

실제 업무에서는:

• 항상 새로운 프로젝트만 하는 것이 아닙니다.
• 기존 코드베이스에 합류하게 되는 경우가 많으며, 그 중 상당수가 아직도 클래스 컴포넌트를 사용하고 있습니다.

이를 이해하지 못하면 자신 있게 할 수 없습니다:

• 코드를 읽기
• 문제를 디버깅하기
• 안전하게 리팩터링하기

Takeaways

• 옛 React를 이해하는 것은 튜토리얼 수준이 아닌 진정한 React 개발자가 되기 위한 필수 요소입니다.
• 뒤로 가는 것이 아니라 현대 React의 기반을 이해하는 것입니다.
• Hooks 이전에 React가 JavaScript 클래스를 어떻게 사용했는지를 알면 다음과 같은 이점이 있습니다:
  • 옛 코드를 더 자신 있게 읽을 수 있다
  • 실제 프로젝트에서 더 편안하게 작업할 수 있다
  • React 개발자로서 더 성숙해진다

계속 배우고 있습니다. 계속 성장하고 있습니다. 계속 만들어갑니다. 💪