[React] 이론 정리 Mark III

offdutybyblo·2020년 6월 17일
0

React 

목록 보기
7/9
post-thumbnail

1. LifeCycle

  • 기본적으로 라이브러리, 프레임워크는 각각 lifecycle을 가지고있다. 우리가 사용하는 라이브러리나 프레임워크에 개발 스타일을 맞춰줘야한다.
  • lifecycle을 잘 이해하고있어야 백엔드와 통신이 원활하다.
  • 서버 개발자와 API를 통해 소통할 수 있어야 데이터를 받을 수 있고 이 소통 방식이 API이다.
  • 기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효과적이다.

기본 구조

  1. constructor()
    특정한 컨퍼넌트를 초기화해준다.
  2. componentWillMount()
  3. render()
    렌더링을 통해서 화면에 출력
  4. componentDidMount()
    화면에 렌더링이 모두 끝나고 실행된다.

데이터 변경 LifeCycle

  1. shouldComponentUpdate()
  2. componentWillUpdate()
  3. reder()
  4. componentDidUpdate()

2. Sass

1)설치

npm install sass --save

2) .css 파일의 확장자를 .scss로 바꾸기

3) Nesting 기능 적용하기

  • nesting은 말 그대로 종속시켜서 상위 요소 안에서 하위 요소의 스타일 속성을 정의하는 것
  • JSX 최상위 요소의 clssName을 컴포넌트 이름과 동일하게 설정해주고, .scss파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 구성하자

4) 변수 활용, &연산자 등 Sass 기본 기능 적용하기

  • Sass에는 변수에 자주 사용되는 컬러를 지정해줄 수 있다.
  • 자세한 내용은 공식문서를 확인하자

3. React Router

1) 정의

  • 라우팅이란 다른 주소에 따라 다른 화면을 보여주는 기능이다.
  • 리액트는 라이브러리이고 라우팅 기능을 내장하지 않고있다. 그래서 라우팅 기능을 대신해주는 라이브러리가 필요하다. (!! 리액트가 Framework으로 구분되지 않는 이유기도 하다!, vue와 angular는 이 기능을 내장하고 있음)

2) React Router 사용

  • React-Router 설치
npm install react-router-dom --save
  • React-router 사용
    • CRA로 만든 앱에 route를 추가해서 사용 하려면 src/app.js에서 대신 routing을 설정한 컴포넌트로 대치해야 한다.
ReactDOM.render(<Routes />, document.getElementById('root'));
  • Routes 컴포넌트 구현하기
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>
          <Route exact path="/" component={Home} />
          <Route exact path="/signup" component={Signup} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

3) Route 이동하기

  • 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>로 변환되므로, 혹시 a태그를 사용하고 싶지 않다면 Link를 사용하지 않아도된다. (예로 이미 다른 태그로 버튼 컴포넌트를 만들어 놓았을 경우)

4) withRouter HOC로 구현하는 방법

  • Link를 사용하지 않고, 요소에 onClick 이벤트를 달아서 이동하고 싶은 곳으로 넘기는 방법도 있습니다. 아래 goToSignUp이라는 event handler에서 구현한 것 처럼 this.props의 history에 접근해서 이동할 수 있다.

  • 받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면, 해당 라우트로 이동할 수 있다.

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로 감싸주어야 한다. 이렇게 withRouter같이 해당 컴포넌트를 감싸주는 것을 higher-order-component(HOC)라고 한다.
profile
Front-End Devleoper 일껄요?

0개의 댓글