📌 프로젝트를 하면서 필요한 이론 정리

Route 이동하기

• Route 이동하는 방법은 두 가지가 있다.

Link 컴포넌트를 사용하는 방법

• Routes.js에서 설정한 path로 이동하려면 Link 컴포넌트를 사용하면 된다.

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

• react-router-dom에서 제공하는 Link 컴포넌트는 dom에서 <a>태그로 변환 되기 때문에 페이지를 무조건 이동하려고할 때 사용한다.

withRouter HOC로 구현하는 방법

• Link를 사용하지 않고 element에 onClick 이벤트를 달아서 이동하고 싶은 Router로 넘기는 방법이다.
• 아래 goToSignup 이라는 event handler에서 처럼 this.props의 history로 접근해서 이동할 수 있다.
• 받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면 그 Route로 이동할 수 있다.

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

class Login extends React.Component {

  goToSignup() {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <div
          class="btn signup-btn"
          onClick={this.goToSignup.bind(this)}
        >
          회원가입
        </div>
      </div>
    )
  }
}

export default withRouter(Login);
// props에 route 정보(history)를 받으려면 export하는 class에 withRouter로 감싸줘야 한다. 

• 이 방법은 Route가 이동할 때 조건을 주고자할 때 사용한다.
• 함수 안에서 이루어지는 로직이기 때문에 우리가 원하는 로직을 구현하고, 원하는 때에 페이지를 이동시킬 수 있다.

Mock Data

• mock data, mock-up data라고도 하며 가짜 데이터, 샘플 데이터라고 할 수 있다.
• 실제 API에서 받아온 데이터가 아니라 필요에 의해서 가짜 데이터를 만들어 확인해 보는 용도로 활용할 수 있다.

Mock Data가 필요한 이유

• API가 준비 되지 않은 상태에서 제대로 UI가 구현 되는지 확인 하고 싶은 경우
  프로젝트를 진행할 때 API가 완성되기 까지 시간이 걸리기 때문에 프론트엔드 개발자가 mock data를 만들어 데이터가 들어오는 상황을 미리 예상하고, 들어올 경우 UI가 계획대로 나오는지 확인하기 위함