개발야옹

이전 글

1. 2022.02.09 - [React] - [ React ] React Router

react-router-dom :: <Link> component

react-rotuer-dom library의 <Link> component는 html의 <a> tag와 같이 연결된 주소로 페이지를 전환시켜준다.

<a> tag의 경우 페이지를 전환하는 과정에서 새로운 페이지를 불러오면서 애플리케이션이 가지고 있던 모든 상태를 날려버려 렌더링되어있던 모든 컴포넌트들도 모두 사라지고 페이지를 모두 처음부터 다시 렌더링하게 된다.

그렇기 때문에 react-rotuer-dom library를 사용하여 라우팅 하는 경우에는 <a>태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있는 <Link> component 를 사용하여 페이지 전환을 해야한다. 

<Link> component를 사용하여 페이지를 전환하면 페이지를 새로 불러오지 않고 애플리케이션은 유지를 한 상태에서 HTML 5 History API를 사용하여 페이지의 주소만 변경해준다. 

<Link> Component 사용방법

<Link to="주소">내용</Link>

 App.js

// src/App.js

import './App.css';
import {Link, Route, Routes} from "react-router-dom";
import Home from "./Home";
import About from "./About";


function App() {
  return (
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <ul>
            <li>
                <h2><Link to="/">Home</Link></h2>
            </li>

            <li>
                <h2><Link to="/about">About</Link></h2>
            </li>
        </ul>
        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

실행화면

React Router 사용법

1.  프로젝트 생성 및 라이브러리 설치

npx create-react-app react-rotuer-tutorial // cra react project 생성
cd react-router-tutorial // 생성한 project dir로 이동
npm install react-router-dom // react-router-dom 라이브러리 설치

2.  프로젝트에 라우터 적용

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";

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

reportWebVitals();

3.  라우팅할 페이지 만들기

// src/Home.js

const Home = () => {
    return(
        <div>
            <h1>I'm home!</h1>
        </div>
    )
}

export default Home;

// src/About.js

const About = () => {
    return(
        <div>
            <h1>I'm About!</h1>
        </div>
    )
}

export default About;

4.  Routes, Rotue 컴포넌트로 특정 주소에 컴포넌트 연결

// src/App.js

import logo from './logo.svg';
import './App.css';
import {Route, Routes} from "react-router-dom";
import Home from "./Home";
import About from "./About";


function App() {
  return (
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

5.  라우팅 잘 되는지 확인하기

npm start

localhost:3000

localhost:3000/about

react-router-dom v6 부터 문법이 조금 바뀌었다. 위에서 설명한 문법은 v6 문법이다. 

• 일반 CSS
• Sass
• CSS Module
• styled-components

Sass

확장자 : .scss, .sass

import : import '저장경로';

.scss => 중괄호 세미콜론 사용

.sass => 중괄호 세미콜론 사용 X

Sass도 CSS Module로 사용이 가능하다. => 확장자 .module.scss

Sass 를 사용하기 위해서는 node-sass library를 설치해줘야 한다. 

설치

yarn add node-sass

Sass는 변수 정의를 허용한다. 변수는 $로 시작하며 변수 할당은 콜론 ( : ) 으로 마무리한다.

scss 스타일

$primary-color : #ffffff;
$primary-background : #efaba2;

.content{
	background : $primary-background;
    color : $primary-color;
}

sass 스타일

$primary-color : #ffffff
$primary-background : #efaba2

.conten{
	background : $primary-background
  	color : $primary-color

컴파일 결과

.content{
	background : #efaba2;
    	color : #ffffff;
}

CSS Module

확장자 : .module.css

import : import styles from '저장 경로';

css를 불러와서 사용할 때 className을 고유한 값, 즉 [ 파일 이름 ]_[ 클래스 이름 ]_[ 해시값 ] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지한다.

확장자를 .module.css 로 저장을 하면 자동으로 CSS Module이 적용된다.

해당 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다. 

import하고 styles를 console.log로 찍어보면 { key : value } 형태로 불러와 지는 것을 확인할 수 있다.

[ + ] classnames

classnames는 props값에 다라서 다른 style을 주기 쉽게 하기 위한 라이브러리이다. 

CSS Module을 사용할 때 classnames 라이브러리를 함께 사용하면 여러 클래스를 적용하고, 조건부를 설정할 때 편리하다.

설치

yarn add clssnames

classnames 간단한 사용방법

import cn from 'classnames';

cn( 'one' , 'two' ); // = "one two"
cn( 'one' , { two : true } ); // = "one two"
cn( 'one' , { two : false } ); // = "one"
cn( 'one' , [ 'two', 'three' ] ); // = "one two three"

const myClass = "hello";
cn('one', myClass, { myCondition : true } ); // = "one hello myCondition"

styled-components

import : import styled from "저장 경로";

설치

yarn add styled-components

CSS in JS Library로, styled-components를 대체할 라이브러리로는 emotion이 있다.

JS file 안에 style을 선언하는 방식이다. 

사용방법

import styled from 'styled-components';

const Title = styled.h1`
	font-weight : 800;
    color : lightgreen;
`;

{...}

function App(){
	return(
    	<div>
        	<Title>안녕하세요!</Title>
        </div>
    )
}

export default App;

※ 만약 props를 사용하는 경우 styled-components에서 css를 불러와 Tagged 템플릿 리터럴을 사용해 주어야 한다.

[ + ] 반응형 디자인 media query 사용

참고 :

리액트를 다루는 기술 ( 책 )

https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)

DOM ( Document Object Model )

DOM은 Document Object Model의 약자로 HTML, XML, 문서의 프로그래밍 interface로 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 

DOM은 구조화된 nodes, property, method를 갖고있는 tree형태의 objects로 문서를 표현한다. 

동적으로 웹 페이지를 변경하게 되면서 많은 CSS, JS 연산이 발생하게 되는데, 매번 이러한 변경이 발생할때마다 DOM을 새로 그려주게 되면 시간 소모가 많이 발생하게 된다. 결과물은 동일하게 유지하되 변경되는 DOM을 최소한으로 하여 시간을 단축하는 방법으로 React는 Virtual DOM이라는 개념을 도입하여 DOM 처리과정을 최적화시켰다.

Virtual DOM ( Virtual Document Object Model )

Virtual DOM은 Real DOM의 복사본과 같은 존재이다. Virtual DOM이 존재하는 이유는 Real DOM에는 Browser가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업 자체가 무겁기 때문이다.

Virtual DOM에는 원래 DOM에 존재하는 모든 객체에 대해 React Virtual DOM에 해당 객체가 존재한다. 그러나 document의 layout을 직접 변경할 수 있는 권한이 Virtual DOM에게는 없다. 

React에서 Virtual DOM을 이용하여 Real DOM을 처리하는데, Virtual DOM에서 상태가 변경되면, 해당 상태변화와 실제 변경된 부분을 확인하고, DOM API를 호출하여 Real DOM에 해당 변경된 부분을 반영하여 Rerendering해준다. 

출처 :

https://reactjs.org/docs/reconciliation.html

https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://www.geeksforgeeks.org/reactjs-virtual-dom/

http://www.tcpschool.com/javascript/js_dom_concept

https://buyandpray.tistory.com/79