다시 한 번 React

React는..

유저 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리에용.

---

 

React의 파일 구조

1. node_modules

- 패키지 관리자에 의해 프로젝트에 필요한 모듈들이 담기게 됨.

2. public

- 정적 파일들이 담겨 있음.

3. src

- 작업 파일들이 들어가게 됨.

---

간단한 Hello World 작성

// Hello.jsx
import React from "react";

function Hello() {
    return <div>Hello </div>
}

export default Hello;

// App.js
import Hello from "./Hello";

function App() {
  return <Hello />
}

export default App;

+

찾아보다가 발견한 글: React17 부터는 import React from "react"를 안해도 된다

실제로 위 코드에서 import React.. 구문을 빼고 실행시키면, 문제없이 잘 돌아간다.

---

JSX와 Babel

- JSX는 JS와 XML을 합성함. (= JS + XML)

- XML(EXtensionable Markup Language)은 데이터를 저장하고 전달하는 것이 목적임. 태그를 직접 정의해서 사용함.

---

Babel은 왜 사용해야 하는가

- Babel은 호환성 때문에 JSX 코드를 JS로 변환해주는 트랜스파일러임.

- 그럼 애초에 JS로 작성하면 되는거 아닌가? 

- 하지만, JS 코드보다 JSX의 문법이 훨씬 가독성이 좋고 코드의 양이 많아졌을때 관리하기 수월함.

---

Fragment 태그

리액트는 반환할 컴포넌트의 html 태그를 전체적으로 감싸주어야 하는데, 이 과정에서 불필요한 태그들이 발생할 수 있다.

이러한 것을 피하기 위해 사용하는 태그가 바로 Fragment 태그이다.

 

<Fragment>
  <div>Hello</div>
  <div>my name is jang</div>
</Fragment>

or

<>
  <div>Hello</div>
  <div>my name is jang</div>
</>

---

JS의 표현식 사용

브라켓({})을 이용하여 변수를 담을 수 있다.

---

조건부 렌더링

일반적으로 JS에서 사용하던 If 문과는 조금 다름.

---

삼항연산자

(num > 1) ? ture : false

---

useState

 

State = 컴포넌트의 상태여부를 의미함.

ex) 시간이라는 컴포넌트가 있다면, 현재시간을 상태로 가질 수 있음.

 

클래스형 컴포넌트로 만들면 useState를 사용할 필요가 없음.

하지만, 함수형 컴포넌트에서는 따로 State를 다룰 수가 없음. 하지만, 리액트의 v16.8 이후로 useState가 도입되면서 가능해짐.

(현재 기준 리액트 최신: v18.02)

 

reactHook의 useState는 State를 간편하게 생성하고 업데이트할 수 있게 도와줌. 다음과 같이 import하여 사용함.

import { useState } from 'react'

 

변수 선언은 다음과 같이 함.

const [state, setState] = useState(초기값)

---

유용한 스니펫(약어)

 

- rfce: 파일명의 컴포넌트를 다음과 같이 만들어줌.

// App.js
import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

-rsc: 위의 기능과 동일. arrow function 으로 만들어줌.

import React from 'react';

const App = () => {
    return (
        <div>
            
        </div>
    );
};

export default App;

 

- imrs: react와 useState를 import 함.

import React, { useState } from 'react';

---

MPA와 SPA

 

MPA(Multiple page Application)

- 사용자가 새로운 페이지를 요청할 때 마다, 서버에서 준비한 새로운 페이지를 보여줌

- 페이지 전체를 다시 렌더링 하기 때문에, 사용자의 인터페이스(상태)를 유지하기도 어렵고 불필요한 로딩이 발생함.

 

SPA(Single page Application)

- 한 페이지로 구성된 화면.

- 첫 요청시에 딱 첫 페이지만 불러오고 페이지 이동 시 페이지 내부를 수정하는 방식.

- 사용자의 주소가 변함에 따라, 다른 주소에 다른 화면을 보여주는 것 = 라우팅.

---

Route 사용법

// <Routes></Routes> 로 감싸주기도 함.
<Route path="경로" element={나타낼 컴포넌트} />

---

Link 사용법

<Link to="경로"></Link>

리액트에서 페이지를 이동할 때는 <a> 태그의 href 대신 Link를 사용해야 한다.

- <a> 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 

- Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.

---

URL 파라미터의 useParams hook

만약 상위 컴포넌트에서 다음과 같이 작성되었다면..

<div>
    {movies.map((movie) => (
        <Link to={`/movies/${movie.id}`} key={movie.id} style={{ display: "block" }}>{movie.title}</Link>
    ))}
</div>

Link 태그의 to 속성에 URL 파라미터로 담겨져있는 movie.id는 하위 컴포넌트에 전달되어 useParams로 받을 수 있다.

import { useParams } from "react-router-dom"

으로 하위 컴포넌트에서 useParams를 사용하겠다고 정의 한 뒤,

const params = useParams();

를 console.log()로 찍어보면 movieId 값이 넘겨져 오는 것을 알 수 있다.

const location = useLocation();

이를 이용하여 id 값을 통해 JSON 파일에서 원하는 데이터 정보를 불러 올 수 있다.

export function getMovie(id) {
    return movies.find((movie) => movie.id === id);
}

const movie = getMovie(parseInt(params.movieId));

---

useLocation

- 현재 사용자가 머물러 있는 페이지를 알려주는 hooks

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

로 import를 해준뒤, 다음과 같이 입력하고 변수를 console.log() 해보면.

const location = useLocation();

위 useParam 변수 / 아래 useLocation 변수

쿼리스트링을 파싱할 때는 useSearchParams를 사용한다.

const [params, setParams] = useSearchParams();

- get 매서드는 쿼리 파라미터를 조회하는 역할

- set 매서드는 특정 쿼리 파라미터를 업데이트 해주는 역할을 함.

---

useNavigate

이름 그대로 네비게이트 역할을 하는 hook

import { useNavigate } from "react-router-dom"

const navigate = useNavigate();
const goHome = () => {
    navigate("/");
}

<button onClick={goHome} type="button">홈으로</button>

---

BrowserRouter

BrowserRouter는 HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 Router이다.