5-4. 헤더 숨기기

특정 라우트에서는 헤더를 숨기는 기능을 구현해보겠습니다. 일단, 헤더를 숨기고 보여주는 액션은 섹션 1에서 리덕스를 설정 할 때 정의를 했었습니다 (SET_HEADER_VISIBILITY).

헤더는 앱 내에서 기본적으로 보여주고, 특정 라우트에 들어갔을 때 componentWillMount 에서 헤더를 숨기도록 설정하고, 그리고 해당 라우트에서 벗어날 때 componentWillUnmount 를 통하여 다시 헤더를 활성화 하도록 하겠습니다.

그리고, HeaderContainer 를 리덕스에 연결시켜서 visible 값에 따라 숨길지 말지 정하도록 하겠습니다.

`SET_HEADER_VISIBILITY` 액션 호출

Auth 페이지 라우트를 리덕스에 연결시키고, 해당 라우트가 진입하거나 벗어날 때 헤더의 visible 값을 변경하도록 코드를 작성해보세요.

`src/pages/Auth.js`

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

class Auth extends Component {
    // 페이지에 진입 할 때 헤더를 비활성화
    componentWillMount() {
        this.props.BaseActions.setHeaderVisibility(false);
    }

    // 페이지에서 벗어 날 때 다시 활성화
    componentWillUnmount() {
        this.props.BaseActions.setHeaderVisibility(true);
    }

    render() {
        return (
            <div>
                Auth
            </div>
        );
    }
}

export default connect(
    (state) => ({

    }),
    (dispatch) => ({
        BaseActions: bindActionCreators(baseActions, dispatch)
    })
)(Auth);

HeaderContainer visible 값 연결

그 다음엔, HeaderContainer 컴포넌트를 리덕스에 연결시켜 visible 값에 따라 숨기도록 코드를 작성하세요.

`src/containers/Base/HeaderContainer.js`

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

class HeaderContainer extends Component {
    render() {
        const { visible } = this.props;
        if(!visible) return null;

        return (
            <Header>
                <LoginButton/>
            </Header>
        );
    }
}

export default connect(
    (state) => ({
        visible: state.base.getIn(['header', 'visible'])
    }),
    (dispatch) => ({

    })
)(HeaderContainer);

자, 이제 로그인 페이지에 들어갔을 때, 헤더 컴포넌트가 사라지는지 확인을 하세요.

5-4. 헤더 숨기기