리액트#3 복습 #1과 경로 router

• react
  MVC(Model(무엇) View(보여줘) Controller(어떻게 -로직처리))에서 vue만 다룬다.
• CRA(node npm가 설치가 되어있어야 한다. node가 브라우저 환경에서만 쓸 수 있는 기타 환경에서 돌아가는 것, refresh를 안해도 된다. 기본세팅을 이루는 것이 Node기반이다. 노드패키지 매니저 CRA는 노드 모듈에 있다.)
• Component
• JSX : HTML문법을 JS파일에 작성할 수 있도록 하는 것.
• SASS 
• state
• Event
• props
• react router

 

class 내부에서 return()시 최상위 요소 하나를 만들어줘야할 때

<div>대신에 <></>를 사용해줘도 된다. 하지만 <div>는 Component이름과 동일하게 className을 주는 것이 가장 좋은 방법이다. 컴포넌트 이름이 유니크 하기에 컴포넌트 이름은 다른 CSS와 겹칠일이 없기에 최상단의 태그에 컴포넌트 이름 넣어주는 것이 좋다고 한 것.

예시) <div className = 'Login'></div>

import React from "react";
import "./Login.css";

class Login extends React.Component {
  render() {
    return (
      <> //최상위 요소 없을 때 사용, 하지만 div는 Component이름과 동일하게 className
        <div className="login_page">
          <div className="download">
            <span>앱을 다운로드 하세요.</span>
            <div className="download_store">
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default Login;

 

 

Sass

Sass(SCSS) 완전 정복!

sass의 3버전에서 새롭게 등장한 scss는 css구문과 완전히 호환되도록 새로운 구문을 도입해서 만든 sass의 모든 기능을 지원하는 상위집합으로 scss는 css와 거의 같은 문법으로 sass기능을 지원한다. {}, ;의 유무로 sass는 {}와 ;가 없다.(들여쓰기 구분) scss는 {}와 ;이 존재한다.({}범위로 구분을 한다.)sass가 라이브러리이고 scss가 확장자 이름이다. 

 

Router

페이지 이동을 라우팅 기능이라고 하는데, 리액트가 기본적으로 가지고 있진않는다. 추가적으로 react router를 라이브러리에 설치를 해야한다. 일종의 라이브러리 개념이라고 생각하면 되며, 라이브러리는 프로젝트를 하다가 필요에 의해서 설치하는 것이라고 생각하면 된다.

Routes에서 설정한 path로 이동하도록 구현하려면 Link 컴포넌트를 사용합니다.

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

class Login extends React.Component {
  render() {
    return (
    <Link
        <div>
          <Link to="/signup">회원가입</Link> //signup페이지로 이동하고 싶다. a태그와 같은 기능이다. 누르면 무조건 이동
        </div>
    />  //이것도 가능하다. 
    )
  }
}

export default Login;

 

 

withRouter HOC

페이지 이동 기능 (조건도 넣어줄 수 있다.) link 사용하지 않고, 요소에 onClick이벤트를 달아서 이동하고 싶은 곳으로 넘기는 방법도 있습니다. 

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)} //여기서 this는 component JSX에서 JS를 사용하고 싶으면 {}사용하면 된다.
        >
          회원가입 //얘가 버튼인데 누르면 회원가입 버튼으로 이동하고 싶다.
        </div>
      </div>
    )
  }
}

export default withRouter(Login);

이 컴포넌트에서 props에 route 정보(history)를 받으려면 export하는 class에 withRouter로 감싸주어야 합니다. 이렇게 withRouter같이 해당 컴포넌트를 감싸주는 것을 higher-order component(이하 HOC) 라고 합니다.

HOC는 react 고급 기능입니다. 기능이라기보다는 컴포넌트의 공통부분을 구현하는 패턴이라고 생각하시면 됩니다. 간단히 설명하면 HOC는 함수입니다. 그런데 컴포넌트를 인자로 받고, 컴포넌트를 return하는 함수입니다.

자세한 내용은 react에 충분히 익숙해지고, 프로젝트 2개 끝난 후 공부하는 것이 좋을 것 같습니다. 이번에는 react-router에서 제공하는 withRouter라는 HOC를 사용하고, 우리는 props에서 라우팅 정보만 편하게 받으면 됩니다. 혹시 충분히 아신다면 컴포넌트 공통화 - HOC에서 공부해주세요.

console.log로 this.props.history 에 어떤 정보들이 더 오는지 한 번 확인 해보세요 :)

//위치는 src폴더 파일 위에
import React from 'react';
import { //필요한 기능들 임포트
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
import Home from './Pages/Home';
import Signup from './Pages/Signup';

class Routes extends React.Component {
  render() {
    return (
      <Router> //최상위: 페이지를 이동시켜주는 기능을 하는 것이고
        <Switch> //if문에 case에 따른 처리 
          <Route exact path="/" component={Home} /> url의 경로가 정확히 [ath일때 내가 원하는 컴포넌트가 나오는 것이다.
          <Route exact path="/signup" component={Signup} />
          exact path를 써야 경로가 안겹쳐서 나온다.
        </Switch>
      </Router>
    )
  }
}

export default Routes;

props가 object이기에 history를 .해서 사용해줄 수 있다.