이번장에서는 컴포넌트가 중첩된 복잡한 사용자 인터페이스를 만드는 방법.

이를 위해 컴포넌트 API를 propTypes를 통해 노출하는 것의 중요성을 확인하고, 리액트 어플 내의 데이터 흐름에 대배 배우고, 컴포넌트를 조합하는 방법을 알아본다.

속성 유효성 검사

이것과 관련된 이야기는 여기를 참고해봅시다.

컴포넌트 조합 전략과 모범 사례

이번 절에서는 컴포넌트를 조합해 리액트 애플리케이션을 만들기 위한 전략과 모범 사례를 다룬다. 좀 더 구체적으로 설명하자면 상태 관리와 데이터 가져오기(fetch), 사용자 상호작용을 더 체계적으로 제어하는 법을 알아본다.

상태 저장 컴포넌트와 순수 컴포넌트

컴포넌트는 상태(State)와 속성(Props)을 가짐을 알 수있다.

속성(Props)은 컴포넌트의 구성 정보에 해당한다. 속성은 상위 컴포넌트로부터 받으며, 이를 받은 컴포넌트 내에서는 변경할 수 없다.

상태(State)는 컴포넌트의 생성자에 정의된 기본값에서 시작해(일반적으로 사용자 이벤트에 의해)여러차례 변경될 수 있다. 컴포넌트는 자신의 상태를 내부적으로 관리한다. 또한 상태가 변경될 때마다 컴포넌트가 다시 렌더링된다.

리액트 컴포넌트에서 상태는 선택적이다. 대부분의 리액트 애플리케이션에서 컴포넌트는 상태를 관리하는 컴포넌트(상태 저장 컴포넌트)와 내부 상태가 없고 데이터를 표시하는 역할만 하는 컴포넌트(순수 컴포넌트)의 두가지 유형으로 나뉜다.

순수 컴포넌트의 목적은 속성을 받고 이를 뷰에 렌더링하는 것이 전부이므로 이러한 컴포넌트는 재사용하거나 테스트하기가 수월하다.

그런데 경우에 따라 사용자 입력, 서버 요청 또는 시간의 흐름에 반응해야 하는 상황이 있으며, 이를 위해 상태를 이용해야 한다. 상태 저장 컴포넌트는 일반적으로 컴포넌트 계층에서 상위를 차지하며, 상태 저장 컴포넌트나 순수 컴포넌트를 하나 이상 래핑한다.

앱의 컴포넌트는 대부분 상태 비저장으로 만드는 것이 좋다. 애플리케이션의 상태를 다수의 컴포넌트로 분산하면 관리하기 힘들고 애플리케이션의 작동 방식을 확인하기도 어렵기 때문이다. 또한 해결하기 아주 까다로운 문제가 생길 가능성이 있다.

어떤 컴포넌트가 상태 저장이어야 할까?

상태가 필요한 컴포넌트를 구분하는 것은 리액트 초보자에게는 가장 이해하기 어려운 문제 중 하나다. 어떤 컴포넌트가 상태를 가져야 하는지 확신이 서지 않을 때는 애플리케이션의 각 상태에 대해 다음의 4단계 검사 목록을 적용한다.

• 해당하는 상태를 기준으로 무엇가를 렌더링하는 모든 컴포넌트를 찾는다.
• 공통 소유자 컴포넌트를 찾는다(계층에서 상태를 필요로 하는 모든 컴포넌트의 상의에 있는 단일 컴포넌트)

• 공통 소유자나 계층에서 더 상위에 있는 다른 컴포넌트가 상태를 소유해야 한다.

• 해당 상태를 소유하기에 적절한 컴포넌트를 찾을 수 없는 경우 단순히 상태를 저장하기 위한 컴포넌트를 새로 만들고 계층에서 공통 소유자 컴포넌트 위쪽에 추가한다.

다음 예를 통해서 이해하자

데이터 흐름과 컴포넌트 통신

리액트 애플에서 데이터는 컴포넌트 계층에서 아래쪽으로 전달된다. 리액트는 프로그램이 어떻게 작동하는 쉽게 알수 있도록 이러한 흐름을 명시적으로 드러낸다.

그러나 아주 단순한 앱이 아니라면 중첩된 자식 컴포넌트가 부모 컴포넌트와 통신해야 하는 경우가 있다.

한 가지 방법은 부모 컴포넌트가 속성으로 전달한 콜백을 이용하는 것이다.

ContactApp 예제를 이용해 그 방법을 알아보자.

상태는 최상위 ContactApp 컴포넌트에 속하며 속성을 통해 SearchBar와 ContactList 컴포넌트로 전달된다.

그리고 사용자가 검색 폼을 수정할 때마다 사용자 입력을 반영해 상태를 업데이트해야 한다. 컴포넌트는 자신의 상태만 업데이트해야 하므로 ContactApp은 상태 업데이트가 필요할 때마다 호출할 콜백을 SearchBar로 전달한다. 입력에 대한 알림을 보내는 데는 onChange 이벤트를 이용할 수 있다. ContactApp에서 filterText상태를 변경하는 로컬 함수를 만들고 이 함수를 속성을 통해 SearchBar로 전달한다.

import React,{Component, PropTypes } from 'react'
import SearchBar from "./SearchBar";
import ContactList from "./ContactList";

// Renders a SearchBar and a ContactList
// Passes down filterText state and handleUserInput callback as props
class ContactsApp extends Component {
    constructor(){
        super();
        this.state={
            filterText: ''
        }
    }

    handleUserInput(searchTerm){
        this.setState({
            filterText:searchTerm
        })
    }

    render(){
        return(
            <div>
                <SearchBar filterText={this.state.filterText}
                           onUserInput={this.handleUserInput.bind(this)} />
                <ContactList contacts={this.props.contacts}
                             filterText={this.state.filterText}/>
            </div>
        )
    }
}
ContactsApp.propTypes = {
    contacts: PropTypes.arrayOf(PropTypes.object)
};

export default ContactsApp