💥React 라이브러리

React 라이브러리 정리

리액트에서 자주 사용하는 라이브러리를 정리해 나갈 게시글입니다.

---

01. styled-components

styled-components 라이브러리는 React 대상 라이브러리로, CSS를 React의 자바스크립트 내에서 사용할 수 있도록 해주는 라이브러리로,
styled-component로 직접 CSS가 적용된 태그를 작성해서 사용할 수 있는 장점이 있다.

터미널 > npm install styled-components

styled-components 임포트

import styled from 'styled-components'

02. import from 'react-router-dom';

터미널 : npm i react-router-dom

App.js에서 라우터를 설정하기 위한 react-router-dom
(1) Router: 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.
(2) Routes : 여러 Route를 감싸서 그 중 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
(3) Route : path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

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

const App = () => {
    return (
        <Router>
          <Routes>
            <Route path='/' element={이동할파일}></Route>
            <Route path='/*'></Route>
          </Routes>
        </Router>
    );
}

Link 태그를 사용하기 위한 react-router-dom
(1) Link : 리액트 라우터에서 페이지 이동할 때 Link 컴포넌트를 사용하면 내가 이동하고자 하는 경로(URL)로 이동

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