[2025 1학기 React.js 스터디] 이상래 #6주차

🔍  비동기 처리 in JS

동기적

• 한 작업이 끝나야 다음 작업 진행

동기적

• 여러 작업이 동시에 진행/ 기다리는 과정에서 다른 함수도 호출 가능

👀 Promise

: 비동기 작업의 완료 또는 실패를 나타내는 객체

 

promise가 가지는 상태

1. pending : 대기 상태 (아직 결과 x)
2. fulfilled : 이행됨 (작업 성공)
3. rejected : 거부됨 (작업 실패)

기본문법 예제

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve('결과');
  } else {
    reject('에러 메시지');
  }
});

resolve() : fulfilled 상태로 전환시키는 함수

 

👀 async/await

기본 문법

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function process() {
  console.log('안녕하세요!');
  await sleep(1000); // 1초쉬고
  console.log('반갑습니다!');
}

process();

• 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여줌
• Promise 의 앞부분에 await 을 넣어줌 => 해당 프로미스가 끝날때까지 기다렸다가 다음 작업 수행
• 함수에서 async를 사용 => 결과값으로 Promise를 반환

---

🔍  API 연동의 기본

👀 REST API 

• 메서드
  1. GET: 데이터 조회 ex) axios.get('API 주소');
  2. POST: 데이터 등록 ex) axios.post('API 주소, {등록할 정보});
  3. PUT : 데이터 수정
  4. DELETE: 데이터 제거
  5. + PATCH, HEAD 같은 메서드도 존재

👀 useState 와 useEffect 로 데이터 로딩하기

컴포넌트에 api 받아오고 렌더링 해줬더니 잘 뜹니다

• useEffect에 첫번째 파라미터로 등록하는 함수에는 async 사용 불가 => 함수 내부에서 async를 사용하는 새로운 함수 선언 필요
• 로딩 상태일때는 로딩중.. 문구
• users값이 없을 때 null을 보여주도록
• users 배열을 렌더링

👀 버튼을 눌러서 API 재요청하기

왼쪽 코드 부분만 수정해서 버튼만 만들어주면 다시 불러오기 버튼으로 API 재요청이 가능 !

---

🔍  라우팅

: 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미

프로젝트를 하나의 페이지로 구성 or 여러 페이지로 구성 가능

 

❓여러페이지로 구성

만약에 블로그를 만든다고 가정하면 :

• 글쓰기 페이지
• 포스트 목록 페이지
• 포스트 읽기 페이지

이렇게 여러 페이지를 만들어야 할 경우가 있습니다.

 

리액트에서 라우트 시스템을 구축하는 선택지

• 리액트 라우터(React Router) : 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있음.
• Next.js : 리액트 프로젝트의 프레임워크,  라우팅 시스템은 파일 경로 기반으로 작동

 

🔍  싱글 페이지 애플리케이션

: 한 개의 페이지(HTML)로 이루어진 애플리케이션

 

💡 핵심 개념:

• 페이지 전환 시 새로고침이 없다.
• 서버는 한 번만 HTML을 제공하고, 이후에는 필요한 콘텐츠만 JavaScript로 동적으로 교체함.
• React는 이 방식을 쓰는 대표적인 프론트엔드 라이브러리

---

🔍  리액트 라우터 적용 및 기본 사용법

👀프로젝트 생성 및 라이브러리 설치 / 라우터 적용

BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다고 하네요

👀 페이지 컴포넌트 만들기

웹 사이트를 소개하는 About페이지 & 가장 먼저 보여지는 Home 페이지

👀 Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

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

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

index.js를 이런식으로 하면 리액트 18이상에선 안된다고 합니다 !!!

바꿔줬더니 잘 되네요 ㅋ

👀 Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크를 보여줌

-웹 페이지에서는 원래 a태그 사용 : 리액트 라우터를 사용하는 프로젝트에서 a 태그를 바로 사용하면 안됨.

=> a태그를 클릭하여 페이지를 이동할 때 브라우저에서 페이지를 새로 불러오게 되기 때문

 

Link 컴포넌트도 a태그를 사용하긴 하지만

페이지를 새로 불러오는 것을 막고 ,History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음

 

Link 컴포넌트 사용법

<Link to="경로">링크 이름</Link>

 

Link 컴포넌트를 사용해서

이렇게 소개 누르면 해당 링크로 가는 기능이 생긴다~~

---

🔍  URL 파라미터와 쿼리스트링

• URL 파라미터 ex) /profile/velopert
  • 주소의 경로에 유동적인 값을 넣는 형태
  • ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용
• 쿼리스트링 ex) /articles?**page=1&keyword=react
  • 주소의 뒷부분에 ?문자열 이후에 key=value로 값을 정의하며 &로 구분을 하는 형태
  • 키워드 검색,페이지네이션,정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

URL 파라미터

 

• useParams라는 Hook을 사용하여 객체 형태로 조회
• URL 파라미터의 이름은 Route 컴포넌트의 path props를 통하여 설정

쿼리스트링

URL 파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 되는 것 없음

 

• useLoacation이라는 Hook을 사용, location 객체를 반환 (현재 사용자가 보고있는 페이지의 정보를 지니고 있음)
• 이 객체가 가지는 값
  • pathname: 현재 주소의 경로 (쿼리스트링 제외)
  • search: 맨 앞의 ? 문자 포함한 쿼리스트링 값
  • hash: 주소의 # 문자열 뒤의 값(주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)
  • state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값
  • key: location 객체의 고유 값, 초기에는 default이며 페이지가 변경될때마다 고유의 값이 생성됨

쿼리스트링은 location.search 값을 통해 조회 가능

 

쿼리스트링을 쉽게 다루는 방법 !

• useSearchParams는 배열 타입의 값을 반환
• 첫번째 원소 : 쿼리파라미터 조회/수정하는 메서드들이 담긴 객체 반환
  • get(): 특정 쿼리파라미터 조회
  • set() : 특정 쿼리파라미터 업데이트
• 두번째 원소: 쿼리파라미터를 객체형태로 업데이트할 수 있는 함수를 반환

---

 

🔍  중첩된 라우트

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Article from './pages/Article';
import Articles from './pages/Articles';
import Home from './pages/Home';
import Profile from './pages/Profile';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profiles/:username" element={<Profile />} />
      <Route path="/articles" element={<Articles />} />
      <Route path="/articles/:id" element={<Article />} />
    </Routes>
  );
};

export default App;

 

이런 코드를 중첩된 라우트를 사용해서

Outlet까지 써서

이런식으로 뜨게 만들어 줬습니다 !!

👀 공통 레이아웃 컴포넌트

중첩된 라우트와 Outlet은 페이지끼리 공통적으로 보여줘야 하는 레이아웃이 있을때도 유용하게 사용 가능

ex) Home, About, Profile 페이지에서 상단에 헤더를 보여줘야 하는 상황

-중첩된 라우트를 사용하면 컴포넌트를 한 번만 사용하면 됨

Layout컴포넌트를 만들고 렌더링 해주면

컴포넌트 하나만으로 이렇게 같은 헤더를 띄울수 있다 !

👀 index props

Route 컴포넌트에는 index라는 props가 있음. 이 props는 path="/"와 동일한 의미

---

🔍  리액트 라우터 부가기능

👀 useNavigate

: Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook

 

이런식으로 사용하면 다른 페이지로 이동가능 !!

navigate()

 

파라미터가 숫자 타입이라면 앞으로 가거나, 뒤로감.

ex) navigate(-1) : 한 번 뒤로 

ex) navigate(2) : 두 번 앞으로

 

replace

• 페이지를 이동할 때 현재 페이지를 페이지 기록에 남기지 않음

👀 NavLink(컴포넌트)

: 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트

- style 또는 className을 설정할 때 { isActive: boolean } 을 파라미터로 전달받는 함수 타입의 값을 전달

 

ex)

<NavLink 
  style={({isActive}) => isActive ? activeStyle : undefined} 
/>

<NavLink 
  className={({isActive}) => isActive ? 'active' : undefined} 
/>

 

이런식으로 사용하면 되네요

👀 NotFound 페이지 만들기

: 사전에 정의되지 않는 경로에 사용자가 진입했을 때 보여주는 페이지(페이지를 찾을 수 없을 때 나타나는 페이지)

이런식으로 설정해주면 됩니다

👀 Navigate 컴포넌트

: 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트

 

성공 ~!

 

이번이 스터디 마지막이네요ㅠㅠ 아쉽습니다