TIL_39_with Wecode 029 React

🙂 index.html
public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. 유일한 html 이다.
🙂 index.js
src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.
🙂 App.js
src 폴더에 있다. 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

SPA?
Single Page Application (싱글 페이지 어플리케이션) 의 약자. 우리는 인스타그램을 클론하면서 로그인 페이지에서 하나의 페이지, 그리고 메인 페이지에서 또 하나의 페이지가 존재했다. 하지만 리액트에는 html이 단 하나만 존재하고, 그 하나의 페이지에 로그인 과 메인 두 페이지를 보여줘야 한다. 실제로 우리가 흔히 보는 웹사이트들 또한 하나의 페이지에 여러가지를 보여주고 있다.

그래서 필요한 것이 react-router 이다.
라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다. 즉, 한개의 웹페이지 안에서 여러 개의 페이지를 보여주는 것이다. 리액트 자체에는 이런 기능이 내장되어 있지 않다. 그래서 리액트가 프레임워크가 아니라 라이브러리로 분류되는 이유 중 하나다. (프레임워크는 내장되어있는 기능이 많아서 프레임워크가 개발자를 제어하며, 개발자는 프레임워크 내에서 움직여야 한다. 그러나 라이브러리는 프레임워크 밖에서 움직일 수 있으며 제어의 주체가 개발자다. )

여기서 잠깐, react-router 는 써드파티 라이브러리이다. 써드파티 라이브러리? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리이며 즉 제 3자 라이브러리를 뜻한다. 제작사에서 만든것이 아니라 다른 업체에서 만든 해당 툴 지원 라이브러리를 가리킨다. 제조사와 사용자 이외의 외부의 생산자를 말한다.

react-router 설치

npm install react-router-dom --save

Routes 컴포넌트 구현하기
src 폴더에 Routes.js 파일을 만들어준다.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
	  <Route exact path="/signup" component={Signup}/>
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}
export default Routes;

나는 로그인과 메인페이지에 접근했다. 여기서 16번째, 17번째 라인의 exact의 중요성: 하나의 페이지 안에서 우리는 주소창에 로그인과 메인 경로에 각각 접근해야한다. 이 때 exact 를 써주지 않으면 컴퓨터는 로그인 페이지 주소 "/" 와 메인 페이지 주소 "/main"을 제대로 구분하지 못하고 페이지가 바뀌지 않는다. 그 이유는 "/main" 주소 안에 같은 슬래시가 존재하기 때문에 슬래시만 보고 같은 주소라고 생각하기 때문. 꼭 exact를 써주도록 하자.

그리고 또 하나, 상단에 import에 쓰여진 순서대로 return 안에서 같은 순서대로 쓰였음을 확인할 수 있다. 가독성을 위해서 쓰여진 순서대로 사용되어지는 순서대로 쓰도록 하자.

import? : 가져오기
"가져오기"는 다른 응용프로그램에 의해 생산된 데이터를 사용하는 것. 외부 데이터를 가져와서 사용하는 것이다.
export? : 내보내기
한 응용프로그램용으로 작성된 데이터를 다른 프로그램에서 사용할 수 있도록 파일 형식을 바꾸어 저장하는 것을 의미한다. export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다.

index.js

ReactDOM.render(<Routes />, 
document.getElementById('root'));

• 현재 화면에는 <App /> 컴포넌트가 보여지고 있습니다. (또는 Login 컴포넌트, Main 컴포넌트)
• CRA로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 합니다.
• <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트(<Routes />)로 변경해야 합니다.
  
  Route 이동하기
  Route 이동하는 방법은 두 가지

1. 컴포넌트 사용하는 방법
2. withRouterHOC 로 구현하는 방법 컴포넌트 사용하는 방법

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;

예를 들어, 우리는 Login.js의 html 코드 안에 로그인 버튼에 링크를 걸어놓으면 된다. 로그인 버튼을 통해서 메인 페이지로 전환될 수 있도록.

• Routes.js 에서 설정한 path로 이동하는 첫 번째 방법은 <Link> 컴포넌트를 사용하는 방법입니다.
• react-router-dom 에서 제공하는 <Link> 컴포넌트는 DOM에서 <a> 로 변환(Compile) 됩니다.
• cf) JSX - Babel - JavaScript
• <a> 태그와 마찬가지로 <Link> 태그도 지정한 경로로 바로 이동시켜주는 기능을 합니다.
• cf) <a> vs. <Link>
  • <a> - 외부 사이트로 이동하는 경우
  • <Link> - 프로젝트 내에서 페이지 전환하는 경우

withRouterHOC 로 구현하는 방법

import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
  goToMain = () => {
    this.props.history.push('/main');
  }
 ** // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }
  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}

          로그인
        </button>
      </div>
    )
  }
}
export default withRouter(Login);

• <Link /> 를 사용하지 않고 요소에 onClick 이벤트를 통해 페이지를 이동하는 방법도 있습니다.
• goToMain 라는 event handler에서 구현한 것처럼 props 객체의 history (this.props.history) 에 접근해서 이동할 수 있습니다.
• console.log로 this.props.history에 어떤 정보들이 담겨 있는지 한 번 확인 해보세요 :)
• 받은 history의 push 메서드의 인자로 Routes.js 에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있습니다.
• 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 합니다.
• 이렇게 withRouter 와 같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component (이하 HOC) 라고 합니다.
  
  goToMain 함수안을 봐주세용
  아래 html 코드에서 버튼 부분을 보면 onClick 메소드에 위에서 정의한 함수를 지정해준 것을 확인할 수 있다.
  
  export default withRouter(Login);

두 가지 방법의 활용법
1.
- 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
- ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
2. withRouterHOC
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현합니다.
- ex. 로그인 버튼 클릭 시
- Backend API로 데이터(User Info) 전송
- User Data 인증 / 인가
- response message
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

조건문을 아직 주지 않아서 버튼만 눌러도 메인페이지로 넘어간다.