TIL_React 적용하기

1. 폴더, 파일 구조 세팅하기

CRA 설치 - 폴더 및 파일 구조 세팅

*아이콘이나 사진은 public - images 에 저장 (하기 경로 참고)

<img className="icon-img"
     src="images/instagram.png"
     alt="camera-icon"  />

*css에서는 public 폴더에 접속하는게 불가능함. background-image에 활용해야하는 이미지는 src/assets/images/ 디렉토리에서 관리

2. local Server 띄우기

html, css 코드 복사, 붙여넣기
이 때 class를 className으로 변경
npm start를 해서 Login, Main 컴포넌트 잘 나오는지 확인

3. React Router 적용하기

<Router.js>

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

<Login.js>

import React from "react";
import "./Login.scss";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate("/main");
  };
  return (
    <div className="flex-center container">
     ~~
    export default Login;

<Main.js>

import React from "react";
import "./Main.scss";

function Main() {
return (
  <div className="main">
  ~~
  export default Main;

정리하자면, Login.js, Main.js에서 export 한 것을
Router.js에서 라우터 경로 지정해주고 합쳐준 다음,
최종 index.js로 넘기고 index.js에서는 Render해줌.

<index.js>

import React from "react";
import ReactDOM from "react-dom/client";
import Router from "./Router";
import Main from "./pages/Main/Main";
import Login from "./pages/Login/Login";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
 <React.StrictMode>
   <Router /> // router.js에서 export한거 가져옴.
 </React.StrictMode>
);

<Router.js>

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
     <Routes>
       <Route path="/" element={<Login />} />
       <Route path="/main" element={<Main />} />
     </Routes>
   </BrowserRouter> // 경로 지정해서 router로 페이지 가져오기

<Login.js>

mport React from "react";
import "./Login.scss";
import { useNavigate } from "react-router-dom";

function Login() {
 const navigate = useNavigate();
 const goToMain = () => {
   navigate("/main");
 };
 return ( 
 ~~
 export default Login; 

<Main.js>

import React from "react";
import "./Main.scss";

function Main() {
  return (
  ~~
  export default Main;

4. Sass 적용하기

1) 설치 방법

• npm install sass --save
• 파일 확장자 .scss 로 변경하기

2) 기능 적용

• Nesting 기능
  Sass의 가장 기본적인 기능,. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있게 함.

• 변수활용, &연산자, mixin 등 기본 기능