React Context, Composition vs Inheritance 정리

Composition vs Inheritance

컴포넌트를 확장하고 싶을 때는 상속 대신 Props로 컴포넌트를 전달한다. React가 상속(Inheritance)보다 합성(Composition)을 권장하기 때문이다.

대표적인 패턴이 children prop이다. 컴포넌트 태그 사이에 넣은 내용은 children으로 전달된다. 레이아웃 컴포넌트나 모달 같은 "컨테이너" 역할의 컴포넌트를 이렇게 만든다.

특정 위치에 여러 컴포넌트를 배치해야 할 때는 children 대신 커스텀 Props(예: left, right)를 사용하면 된다. Facebook에서도 수천 개의 컴포넌트를 만들면서 상속이 필요한 경우를 찾지 못했다고 한다.

Context API

Context는 Props를 여러 단계에 걸쳐 전달하지 않고도 (prop drilling 없이) 컴포넌트 트리 전체에 데이터를 공유할 수 있게 해준다.

사용 흐름:

1. React.createContext()로 Context 객체 생성
2. Context.Provider로 값을 공급할 영역을 감싸기
3. 하위 컴포넌트에서 useContext() Hook으로 값을 소비

테마(다크/라이트 모드), 로그인 사용자 정보, 언어 설정 등 "전역적으로" 필요한 데이터에 적합하다.

다만 Context를 남용하면 컴포넌트 재사용이 어려워질 수 있으니, 정말 여러 레벨에 걸쳐 데이터를 전달해야 할 때만 사용하는 것이 좋다. 단순한 prop drilling은 오히려 컴포넌트 합성(Composition)으로 해결하는 게 더 깔끔하다.

React 기초 학습을 마치며

9월 19일 ES6 정리부터 시작해서 오늘 Context까지, 5일간 React 공식 문서의 주요 개념을 모두 훑어봤다. 이제 이론적인 기초는 갖춰졌으니 실제 프로젝트를 만들면서 체득하면 된다. 다음은 멀티캠퍼스 과정에서 팀 프로젝트로 직접 React를 사용해볼 예정이다.