5-2. App 컴포넌트 정리하기

앞으로 App 컴포넌트 안에 있던 대부분의 코드를 지우고 각각 다른 파일에 재작성을 할건데요, 그 전에, 필요없는 코드들을 정리하도록 하겠습니다.

src/App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Container from './components/Container';

class App extends Component {
    render() {
        // 레퍼런스 준비
        const { view } = this.props;

        return (
            <div>
                <Header/>
                {/* ViewSelectorContainer */}

                {/* view 값에 따라 다른 컨테이너를 보여준다 */}
                <Container visible={view==='favorite'}>
                    {/* FavoriteListContainer */}
                </Container>
                <Container visible={view==='list'}>
                    {/* InputContainer */}
                    {/* ContactListContainer */}
                </Container>

                {/* ContactModalContainer */}
                {/* FloatingButtonContainer */}
            </div>
        );
    }
}



export default App;

대부분의 코드를 날리고, 일부 컴포넌트는 컨테이너 컴포넌트로 만들것이여서 주석으로 처리했습니다.

generateRandomColor 함수는 나중 다시 필요해지니 따로 복사해두세요.

앞으로 만들 컨테이너 목록을 한번 살펴보겠습니다:

• ViewSelectorContainer
• FavoriteListContainer
• InputContainer
• ContactListContainer
• ContactModalContainer
• FloatingButtonContainer

우리는 대부분의 컴포넌트를 컨테이너로 만들겁니다.

그리고, App 컴포넌트도 리덕스에 연결해주어 view 값을 전달 시키겠습니다.

실무에서는, 어떤것들을 컨테이너로 만들지 정하는것은 여러분들의 자유입니다.

방식은 크게 두가지로 나뉘어지는데, 지금 하는 것 처럼 주요 기능을 맡은 컴포넌트들을 컨테이너로 따로 만들어주는것과, 페이지 단위 (지금의 경우에는 App) 로 컨테이너로 만들어주는 것 입니다.

둘 다 장단점이 있는데, 컨테이너 컴포넌트를 여러개로 만들 때의 장점은 이를 분리하는 시간이 들어간다는점이고, 장점은 유지보수를 할 때 모두 기능별로 모듈화가 되어있기 때문에 관리하기 쉬워진다는 점 입니다.

페이지단위로 범위를 크게 잡아서 컨테이너로 만들 경우에는, 장점으로는 개발시간이 단축되지만, 단점으로는 일일히 props 로 전달을 해야하고, 코드가 길어집니다.

하지만, 정해진 규칙같은건 없으니, 여러가지를 시도해보시고 자신에게 맞는 방식을 찾는것이 중요합니다.

App 컴포넌트 리덕스에 연결하기

src/App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Container from './components/Container';
import { connect } from 'react-redux'

class App extends Component {
    render() {
        // 레퍼런스 준비
        const { view } = this.props;

        return (
            <div>
                <Header/>
                {/* ViewSelectorContainer */}

                {/* view 값에 따라 다른 컨테이너를 보여준다 */}
                <Container visible={view==='favorite'}>
                    {/* FavoriteListContainer */}
                </Container>
                <Container visible={view==='list'}>
                    {/* InputContainer */}
                    {/* ContactListContainer */}
                </Container>

                {/* ContactModalContainer */}
                {/* FloatingButtonContainer */}
            </div>
        );
    }
}

export default connect(
    (state) => ({
        view: state.base.get('view')
    })
)(App);

이번에는, mapDispatchToProps 함수를 따로 만들어주지 않고 connect 내부에서 바로 정의를 해주었습니다. 주의 하실 점은, 애로우 함수를 작성 할 때, 화살표 다음 {} 객체를 () 괄호로 감싸야 한다는 점 입니다. 만약에 => ({ ... }) 이 아닌 => { } 으로 하시면, 객체가 생성되는것이 아니라 코드블록이 생기므로 오류가 발생합니다.