리액트 문법

CRA : Create-React-App

$ npx create-react-app [프로젝트명]

CRA 구성

1. node_modules : npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더
2. .gitignore : 올리지 않아야 하는 파일 추가
3. package.json : 기본 패키지 외에 추가로 설치된 라이브러리 혹은 패키지의 종류, 버전 등의 정보가 기록되는 파일

리액트 문법 :

리액트는 index.html에서 쓰여지며, index.js에서 내용을 넣어준다.
App.js에는 경로가 들어가서, index.js에서 App.js를 실행한다.

라우터:

라우팅 : 페이지 이동
라우터 : 라우팅 해주는 도구

SPA : HTML이 하나인 웹 어플리케이션

라우터 설치 : npm install react-router-dom

---

src 밑에 Router.js파일 생성
import Main from './pages/Main/Main';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>                                        
    <Routes>                                             
      <Route path='/' element={<Main />} />                	</Routes>
</BrowserRouter>

---

Route 이동하기

(1) Link 컴포넌트 사용하기
a태그와 Link의 차이 : a태그는 외부사이트를 이동할 때 사용한다. Link 컴포넌트는 새로고침하지 않고 그린다.

• 클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합하다.
• Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용하는 것이 좋다.

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

const Login = () => {
  return <Link to='/signup'>회원가입</Link>;
};

(2) useNavigate hook 사용하기

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

const Login = () => {
  const navigate = useNavigate();                             

  const goToMain = () => {
    navigate('/main');
  };

  return (
    <button className='loginBtn' onClick={goToMain}>          
      로그인
    </button>
  );
}

• 로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나
• userData의 인증 혹은 인가가 필요한 경우, 혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용하는 것이 좋다.

조건을 가져야 할때는 useNavigate를 쓴다.

페이지 이동:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
onClick={() => navigate("/signin")

useNavigate를 이용한다.

이미지 활용:

<img src={'/images/다람쥐.jpg'} alt="myPicture"/>

이미지를 public폴더에 넣은 경우는 절대 경로로 활용할 수 있다.

리액트 절대경로 :

public이다.