12주차-파트01: SPA, snippet단축키, 실습준비, redux개념, slice, Provider, Hooks

ddodoi 2024. 11. 4. 23:45

CHAPTER 1. SPA(Single Page Application)

✅SPA란?

Single Page Application의 약자로 단일 HTML 페이지 내에서 작동하도록 설계된 웹 어플리케이션 구조이다. 한번의 초기 로드 후 페이지 이동 시 전체 페이지를 다시 불러오지 않고 필요한 부분만 갱신하여 동작한다.

✔️SPA의 작동 방식

사용자가 웹사이트 처음 접속시 모든 리소스를 한번에 로드
사용자가 링크 클릭하여 페이지 이동시 서버에 새로운 페이지 요청 보내지 X, 클라이언트 측에서 Javascript로 URL변화를 감지하여 동적으로 페이지의 특정 부분만 업데이트
이동하려는 페이지의 데이터가 필요할 경우, 서버에 필요한 데이터를 요청하고 JSON 형식 등으로 응답받아 현재 페이지를 업데이트

CHAPTER 2. snippet단축기 사용

설치후 "rafce"치고 엔터 누르면 리액트 기본 코드가 제공된다.

CHAPTER 3. 실습 준비

<확장자>

.ts: 순수 TypeScript 코드, JSX를 포함할 수 없음
.tsx: TypeScript + JSX 지원, 리액트 컴포넌트를 TypeScript로 작성할 때 사용

실습을 위한 추가 패키지들 설치

npm install @reduxjs/toolkit redux clsx @vanilla-extract/css-utils @vanilla-extract/vite-plugin react-icons uuid react-beautiful-dnd

CHAPTER 4. Redux

✅Redux

상태 관리 라이브러리이다. 리액트에서는 원래 State나 props등을 사용해 상태를 여러 컴포넌트와 공유하는데, 앱이 커질 경우 State나 props를 사용하여 관리하기 힘들어지고 소스코드도 지저분해진다. Redux는 어플리케이션의 모든 상태를 하나의 **전역 저장소(Store)**에서 관리하여, 컴포넌트 간의 상태 공유와 상태 업데이트를 쉽게 한다.

✅Redux의 핵심 개념

1. Store(저장소)

리덕스의 store는 어플리케이션의 전체 상태를 저장하는 곳이다. store는 단일 객체로 모든 상태를 중앙에서 관리하며, 오직 하나의 store만 존재하는 것이 원칙이다. 어플리케이션의 상태를 조회하거나 업데이트를 위해 사용된다. createStore()함수로 생성할 수 있다.

2. Action(액션)

action은 상태에 어떤 변화가 필요할 때, 그 변화를 설명하는 객체이다. 각 액션은 고유한 type필드를 가지고, 필요한 추가 데이터는 payload로 전달된다.

3. Reducer(리듀서)

reducer는 액션을 통해 상태를 변경하는 함수이다. 현재 상태와 액션을 입력으로 받아, 변화를 적용한 새로운 상태를 반환한다. reducer는 불변성을 유지해야하며, 상태를 직접 수정하지 않고 새로운 객체를 반환하는 방식으로 상태를 업데이트한다.

4. Dispatch(디스패치)

Dispatch는 특정 액션을 store에 전달하여 상태를 변경하도록 한다. 액션을 디스패치하면 리덕스는 자동으로 해당 리듀서를 찾아 새로운 상태를 반환한다.

✅Redux의 작동 흐름

1. 사용자가 어떤 행동을 한다 -> 버튼클릭, 폼 제출

2. 액션을 생성하고 디스패치한다 -> 특정 타입과 데이터를 가진 action을 dispatch가 store에 전달

3. reducer가 action을 받아 새로운 상태를 반환한다 ->reducer는 action의 type을 확인하고, 상태를 변경하여 새로운 상태를 생성한다.

4. 상태를 업데이트한다 -> 리액트 컴포넌트가 새로운 상태에 반응하여 재렌더링된다.

한방향으로 흐른다.(uni direction)

Action 객체 Dispatch 함수 => Reducer 함수 type return => Redux Store State => React Component Rerendering

https://despiteallthat.tistory.com/192

[Redux] Redux란?

오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포

despiteallthat.tistory.com

CHAPTER 5. Slice, Provider

✔️Redux Toolkit

Redux Toolkit은 리덕스(Redux)를 더 쉽고 빠르게 사용할 수 있도록 도와주는 공식 라이브러리이다. 리덕스는 상태 관리에 강력한 도구이지만, 설정이 번거롭고 복잡할 수 있어 이를 단순화하기 위해 Redux Toolkit을 만들었다. Redux Toolkit은 상태 관리의 필수적인 기능과 더불어 다양한 유틸리티 함수를 제공하여 리덕스를 보다 직관적이고 간편하게 사용하도록 도와준다.

Toolkit에서 reducer가 있으려면 slice를 만들어야한다.

✔️Slice

Redux Toolkit에서 상태와 관련된 로직을 하나의 단위로 묶어서 관리하기 위해 사용하는 개념입니다. **상태(state), 리듀서(reducer), 액션(action)**을 하나의 객체로 모아 특정 기능별로 나누어 관리하는 구조를 제공하는데, 이를 슬라이스라고 g한다. createSlice를 사용해 슬라이스를 만들며, 리덕스 애플리케이션에서 상태 관리를 기능별로 체계적으로 구성할 수 있습니다.

"createSlice"치고 엔터 시 기본 슬라이스 코드가 제공된다.

다음은 예시 코드이다.

import { createSlice } from '@reduxjs/toolkit';

// 초기 상태 정의
const initialState = {
  count: 0,
  isLoading: false,
};

// 슬라이스 생성
const counterSlice = createSlice({
  name: 'counter',           // 슬라이스의 이름 (기능별로 구분)
  initialState,              // 초기 상태 설정
  reducers: {                // 상태를 변경하는 리듀서 함수 정의
    increment: (state) => {
      state.count += 1;      // 카운트를 증가시키는 액션
    },
    decrement: (state) => {
      state.count -= 1;      // 카운트를 감소시키는 액션
    },
    setLoading: (state, action) => {
      state.isLoading = action.payload; // 로딩 상태 업데이트
    },
  },
});

// 자동으로 생성된 액션을 추출하여 내보내기
export const { increment, decrement, setLoading } = counterSlice.actions;

// 리듀서 내보내기
export default counterSlice.reducer;

✔️<Provider>태그

Provider의 역할

스토어 전달: <Provider>는 리덕스 스토어를 애플리케이션의 모든 컴포넌트가 사용할 수 있도록 전달해 주는 역할을 합니다.
전역 상태 관리: <Provider>가 최상위 컴포넌트를 감싸고 있으면, 하위 모든 컴포넌트는 useSelector, useDispatch와 같은 리덕스 훅을 통해 전역 상태에 접근하고, 상태를 업데이트할 수 있습니다.
리덕스와 리액트 연결: <Provider>는 react-redux 라이브러리에서 제공하는 컴포넌트로, 리덕스와 리액트를 통합하는 핵심 요소입니다.

npm install react-redux

리덕스설치후,

CHAPTER 6. Hooks

✅Hooks

리액트의 Hooks는 클래스형 컴포넌트에서만 사용 가능했던 상태관리와 라이프사이클 메서드를 함수형 컴포넌트에서도 가능하게 해주는 기능이다. 이를 통해 기존 클래스형 컴포넌트를 대체하거나 보완할 수 있다.

주요 Hook들을 살펴보자.

1. useState

상태(state)를 관리하는 기본적인 Hook이다. 상태 값과 그 값을 업데이트 할 수 있는 함수를 반환한다.

장점: 컴포넌트에 독립적인 상태를 쉽게 추가할 수 있다.
주요 포인트: setCount 함수는 상태가 업데이트될 때마다 컴포넌트를 다시 렌더링한다.

<useState의 상태 업데이트 함수의 형식>

1. 새값을 직접 전달하는 방식: 기존 상태를 새로운 값으로 덮어쓴다.

setState(newValue);

2. 이전 상태를 기반으로 업데이트하는 방식 (함수형 업데이트) : 이전 상태를 기반으로 새로운 상태를 계산할 때 유용하다. setState에 함수를 전달하면 그 함수의 인자로 현재 상태 값(prevState)이 들어온다.

setState((prevState) => {
    // 새로운 상태 계산
    return newState;
});

2. useEffect

컴포넌트가 렌더링된 후에 실행할 작업을 지정한다. 데이터 가져오기, 구독 설정, 수동 DOM 조작 등에 유용하다.

장점: 컴포넌트의 생명주기(마운트, 업데이트, 언마운트)에 따라 효과를 지정할 수 있다.
주요 포인트: useEffect의 두 번째 인수로 빈 배열 []을 전달하면, 컴포넌트가 처음 렌더링될 때 한 번만 실행된다.

3. useContext

리액트의 Context API를 더 간편하게 사용할 수 있도록 해주는 Hook이다. 상위 컴포넌트의 상태나 데이터를 하위 컴포넌트에서 쉽게 접근할 수 있게 해준다.

장점: 중간에 위치한 컴포넌트들을 거치지 않고 데이터를 전달할 수 있습니다.
주요 포인트: useContext를 사용하면 데이터가 변경될 때마다 해당 데이터를 사용하는 모든 컴포넌트가 리렌더링된다.

4. useReducer

복잡한 상태 로직이 필요한 경우 useState 대신 사용할 수 있는 Hook이다. reducer 패턴을 이용해 상태를 관리하기 때문에, 상태가 복잡하거나 다수의 하위 상태가 필요한 경우 효과적이다.

장점: 복잡한 상태나 여러 액션을 다룰 때 코드 가독성과 유지보수성이 높아집니다.
주요 포인트: 리듀서 함수를 통해 상태의 변화를 한눈에 알 수 있습니다.

5. useMemo & useCallback

useMemo: 값의 재연산을 방지해주는 캐싱 기능 제공. 주로 컴포넌트가 리렌더링될 때 재계산이 불필효한 값에 사용된다.
useCallback : 함수의 재생성을 방지하여 최적화하는 데 유용하다. 함수를 의존성 배열에 따라 캐싱하기 때문에, 자식 컴포넌트에 함수를 전달 시 유용하다.

주요 포인트: useMemo와 useCallback은 주로 최적화를 위해 사용되므로 필요 이상으로 사용하면 오히려 성능이 저하될 수 있습니다.