TIL. 28 React - Basic, Router

🎈 React

JavaScript와 기본적인 구성은 비슷하지만, 다른 언어라고 봐도 무방한 것 같으며 HTML, CSS, JS가 모두 포함되어 있다.

• React(리액트)는 UI를 효과적으로 보여주기 위한 JavaScript의 라이브러리이다.

• 페이스북의 지속적인 관리로 생태계가 활성화 되어 있으며, 그로인한 여러가지 자료를 원활하게 구할 수 있고, React Native 사용으로 인해 사용자가 꾸준히 증가하고 있다.

• Virtual DOM 불필요한 렌더링을 제외해서 성능을 활성화 시키는 React의 특징적인 기술이다. 브라우저는 기본적으로 전체를 스캔하지만, Virtual DOM은 변경된 부분만 스캔해 효율성이 높다.

• node.js JavaScript가 브라우저 밖에서도 동작하게 하는 환경이다.

• CRA Create-React-App의 약자로, 웹 애플리케이션을 개발할 때 간단한 명령어로 React 개발 환경을 구축 가능하다.

• Component 코드 재활용을 위해 따로 구분해 코드를 작성하는 것을 말한다. 유지보수가 용이하며 해당 페이지의 구성을 파악하는데 도움을 준다.(class형과 function형이 있다.)

🎈 React Router

React는 프레임워크처럼 여러 기능이 내장되어 있지 않으며, 이는 라이브러리로 불리는 이유 중 하나이다. 기능들을 사용하려면 각각의 기능을 설치해야 한다.

• SPA Single Page Application의 약자로, 이름에서 알 수 있듯이 페이지가 1개인 Application을 말한다.

• React 프로젝트에서는 .html 파일이 1개 뿐이다.(index.html) 이 때문에 한 페이지 내에서 다른 화면을 보여주어야 하는데, 다른 경로(url 주소)를 할당해 다른 화면을 보여주는 것을 Routing이라고 한다.

• Router 사용을 위해서는 BrowserRouter, Router, Switch, Route를 import해야 한다.

import {
BrowserRouter, Router, Switch, Route
} from 'react-router-dom';

• 기본적으로 Switch와 Route Component를 사용해 화면을 보여준다.

<Switch>
  <Route exact path="/" component={Login} />
  <Route exact path="/signup" component={Signup}/>
  <Route exact path="/main" component={Main} />
</Switch>

// path는 해당 위치의 url을 지정해주는 속성이다.
// exact는 정확한 url을 지정해야 기능이 작동하도록 하는 속성이다.
// Switch는 값을 새로고침 해주며 exact가 없으면 모든 내용이 동시에 뜬다.

• Link Component HTML의 <a> 태그와 유사하며, 지정한 경로로 이동시켜준다.

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

  <div>
    <Link to="/signup">회원가입</Link>
  </div>

// 회원가입 텍스트에 /signup이라는 링크를 걸어 이동시킨다.
// <a>태그와의 차이는 <a> 외부 경로로 이동할 때 사용하고, <Link>는 프로젝트 내부의 이동 시 사용한다.

• withRouterHOC 링크와는 다른 방식으로 경로를 이동시켜주는 Component이다.

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

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

// gotoMain 함수를 선언하고, onClick을 활용해 이벤트를 발생시킨다.

• Link Component는 클릭 시 바로 이동하는 로직 구현에 사용하고, withRouterHOC Component는 페이지 전환 시 추가 처리해야할 로직이 있는 경우 사용한다.