6.1.5 이벤트 핸들러를 속성으로 전달하기
다음과 같은 경우를 생각해보자. 상태비저장 컴포넌트로 만든 버튼이 있다. 이 버튼 컴포넌트는 스타일만 입혀져 있다. 어떻게 하면 이 버튼에 이벤트 리스너를 연결해서 실행시킬 수 있을까?
잠시 속성으로 다시 돌아가보자. 속성은 변경이 불가능하며, 부모 컴포넌트에서 자식으로 전달된다. 자바스크립트에서는 함수가 일급 객체이므로, 자식 엘리먼트의 속성으로 함수를 전달해서 이벤트 핸들러로 사용할 수 있다.
상태비저장 컴포넌트에서 발생하는 이벤트를 처리하는 방법은 이벤트 핸들러를 상태비저장 컴포넌트의 속성으로 전달하고, 전달한 이벤트 핸들러 함수를 상태비저장 컴포넌트에서 실행하도록 하는 것이다. 예를 들어 앞에서 살펴본 예제의 기능을 둘로 분리하여 ClickCounterButton 컴포넌트와 Content 컴포넌트를 만들어보자. ClickCounterButton은 둔한 컴포넌트(dumb component, 상태비저장 컴포넌트)고, Content는 영리한 컴포넌트(smart component, 상태저장 컴포넌트)다.
Note 둔한 프레젠테이션 컴포넌트와 영리한 컨테이너 컴포넌트
둔한 컴포넌트와 영리한 컴포넌트는 각각 프레젠테이션 컴포넌트(presentational component)와 컨테이너 컴포넌트(container component)라 부르기도 한다. 이런 분류 방법은 상태저장 컴포넌트와 상태비저장 컴포넌트와 관련되어 있기도 하지만, 항상 일치하지는 않는다.
대부분의 경우 프레젠테이션 컴포넌트는 상태가 없는 상태비저장 컴포넌트나 함수형 컴포넌트다. 다만, 컴포넌트의 표현을 위해 상태를 사용하는 경우도 있으므로 반드시 그렇다고 할 수는 없다.
프레젠테이션 컴포넌트는 this.props.children을 자주 사용하고 DOM 요소를 렌더링한다. 반면에 컨테이너 컴포넌트는 DOM 요소가 없을 때의 처리를 다루고, 상태가 있으며, 일반적으로 고차 컴포넌트 패턴(higher-order component pattern)을 사용하고 데이터 소스에 연결하는 역할을 한다.
둔한 컴포넌트와 영리한 컴포넌트를 조합해서 사용하면 코드도 정돈되고 관심사 분리도 가능하게 해주므로 모범적인 사례라고 할 수 있다.