5-4. InputContainer 컴포넌트 만들기

src/containers/InputContainer

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as baseActions from '../modules/base';
import Input from '../components/Input';

class InputContainer extends Component {

    handleChange = (e) => {
        const { BaseActions } = this.props;
        BaseActions.changeSearch(e.target.value);
    }

    render() {
        const { keyword } = this.props;
        const { handleChange } = this;

        return (
            <Input onChange={handleChange} value={keyword} placeholder="검색"/>
        );
    }
}

export default connect(
    (state) => ({
        keyword: state.base.get('keyword')
    }),
    (dispatch) => ({
        BaseActions: bindActionCreators(baseActions, dispatch)
    })
)(InputContainer);

이번 컴포넌트도 간단해서 금방 리덕스에 연결시킬 수 있습니다.

어떤가요? 조금 익숙해짐이 느껴지나요?

App 에서 불러와서 사용하기

이제 이 컴포넌트도 App 컴포넌트에서 불러와서 렌더링하세요.

src/App.js

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

import ViewSelectorContainer from './containers/ViewSelectorContainer';
import InputContainer from './containers/InputContainer';

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);