(2) withRouterHOC 사용

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

• onClick 이벤트를 통해 페이지 이동을 한다.
• goToMain이라는 event handler에서 구현한 것처럼 props 객체의 history(this.props.history)에 접근해서 이동 할 수 있다.
• 받은 history의 push 메서드의 인자로 Routes.js에서 설정한 path를 넘겨주면 해당 라우트로 이동 할 수 있다.
• Login component에서 props에 route정보인 history를 받으려면 export하는 component에 withRouter로 감싸야한다.
• withRouter와 같이 해당 component를 감싸주는 것을 HOC(High Order Component)라 한다.

와 withRouterHOC 활용

• 클릭 시 조건 없이 이동할 때 사용
  예) 상품 리스트에서 클릭시 상세페이지 이동

2. withRouterHOC

• 클릭 시 추가 로직이 필요할 때 사용
  예) 유료 서비스 기능 클릭 시 : 유료 서비스 가입했는지 확인 해야함
  예) 로그인 버튼 클릭 시: 기존 회원인지 확인 해야함
  • Backend API로 data(User Info) 전송
  • User Data 인증/인가
  • response message
  • case 나뉨
    : 회원 가입 되어있는 사람 -> Main page로 이동
    : 회원 가입 안 되어있는 사람 => Signup page로 이동

추가 로직 예시

  goToMain = () => {
   if(response.message === "valid user"){
     this.props.history.push('/main');
   } else {
     alert("회원가입 해주세요.")
     this.props.history.push('/signup');
   }
 }

4. Sass란?

Syntactically Awesome Style Sheets의 줄임말이다. CSS의 확장이다. CSS 구문과 완전 호환이 되지만 CSS를 더 효율적이고 쉽게 편집할 수 있다. CSS 기능과 함께 CSS 변수 및 nesting과 같은 추가 기능이 있다. 확장자는 .sass와 .scss이다. 일반적으로 .scss를 더 많이 쓴다.

1) 설치

npm install node-sass --save

node-modules 폴더에 node-sass 폴더가 생성되면서 package.json에 이름과 버전 정보가 기록된다.

2) 확장자

.sass와 .scss이다.

3) 특징

sass에는 다양한 기능이 있지만 기본적인 기능으로 nesting과 변수사용, mixin이 있다.

(1) Nesting

1. CSS

nav ul {
  margin: 0;
  padding: 0;
  background-color: #dbdbdb;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 4px 8px;
  text-decoration: none;
}

2. nesting 사용 시

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li{
      display: inline-block;
    }
  }

  a{
    display: block;
    padding; 4px 8px;
    text-decoration: none;
  }
}

(2) 변수 활용, & 연산자, mixin

1. CSS

login-container {
	display: flex;
	justify-content: center;
  align-items: center
}

button {
  width: 200px;
	height: 100px;
	background-color: blue;
}

button:hover {
	background-color: red;
	cursor: pointer;
}

input {
	background-color: blue;
}

input:focus {
  background-color: red;
}

2. 변수 및 mixin 사용 시

$theme-color: blue;

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

login-container {
  @include flex-center;
	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;
		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}
	input {
		background-color: $theme-color;
		&:focus {
		  background-color: red;
		}
	}
}