React로 블로그 만들기 #7

React로 블로그 만들기 #7

 - 로그인 구현(4) HOC -

1. HOC (Higher Order Component)

- 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.

- 비즈니스를 담당하는 컴포넌트와 뷰를 담당하는 컴포넌트를 분리할 때 사용함

- 그 외에도 SPA에서 로딩 중 화면 표시 또는 유저 인증 로직 처리, 에러 메시지 표시 등 다양한 방법으로 사용됨.

- 여기서는 유저 인증 로직 처리를 하기 위해 사용함. => 로그인 했을 때만 들어갈 수 있는 페이지(내 글보기, 마이페이지)를 위해 HOC 적용.

1) src/Components/LoginHOC.js 생성

- Store에 저장된 logged 상태에 따라 로그인 했을 때는 내 글보기, 마이페이지를 로그인을 하지 않았을 때는 로그인 페이지를 보여줌.

import React, { Component } from 'react';

import Store from '../Store/store';

import LoginContainer from './LoginContainer';

const withLogin = (WrappedComponent) =>

class IsLogin extends Component {

render() {

return (

<Store.Consumer>

{ store => {

if(store.logged === false)

return <LoginContainer />;

else

return <WrappedComponent />;

}}

</Store.Consumer>

);

}

};

export default withLogin;

2) src/Components/Myboard.js, MyPage.js

- 위에서 만든 로그인 HOC를 적용함

import React, { Component } from 'react';

import styled from 'styled-components';

import withLogin from './LoginHOC';

class MyBoard extends Component {

render() {

return (

<div>

내 글보기

</div>

);

}

}

export default withLogin(MyBoard);

import React, { Component } from 'react';

import styled from 'styled-components';

import withLogin from './LoginHOC';

class MyPage extends Component {

render() {

return (

<div>

MyPage

</div>

);

}

}

export default withLogin(MyPage);