12-4 Redux
|패키지|
📦 실습에서 사용한 패키지
// redux관련 패키지
@reduxjs/toolkit redux clsx @vanilla-extract/css @vanilla-extract/css-utils
@vanilla-extract/vite-plugin react-icons uuid react-beautiful-dnd
// redux sotre를 리액터 컴포넌트들과 연결
npm i react-redux각 패키지의 기능
| 패키지 | 기능 |
|---|---|
| redux | Redux 자체 |
| @reduxjs/toolkit | Redux 공식 툴킷 - Redux 코드를 간결하게(축약, 완성) |
| react-redux | React앱에서 Redux store 연결이 가능하게 |
| clsx | 조건부 클래스 네이밍 (className 조합을 쉽게) |
| @vanilla-extract/css | CSS-in-TypeScript - 타입을 고려한 스타일링 |
| @vanilla-extract/css-utils | vanilla-extract 유틸 |
| @vaniklla-extract/vite-plugin | Vite에서 vanilla-extract를 잘 작동하게 해주는 플러그인 |
| react-icons | 다양한 아이콘 모음(FontAwesome, Material) |
| uuid | 고유한 ID 생성할 때 사용 |
| react-beautiful-dnd | 드래그 앤 드롭 기능을 React에 쉽게 구현 |
➕ extension
ES7+ React/Redux/React-Native snippets
- React파일의 기본구조를 쉽고 빠르게 생성해주는 확장프로그램 (html에서 !tab하는 것처럼 편함)
|단축키워드|
| 키워드 | 완성되는 코드 |
|---|---|
| rafce | 화살표 함수 형식 + export default 컴포넌트 |
| rce | class형 컴포넌트 |
| usf | useState + 함수형 컴포넌트 |
| imr | import React from 'react' |
| impt | import PropTypes from 'prop-types' |
ListContainer.tsx 파일에서 rafce 입력하고 tab 하면
=>
import React from 'react'
const ListsContainer = () => {
return (
<div>ListsContainer</div>
)
}
export default ListsContainer
위 코드처럼 자동으로 리액트 기본구조를 완성해준다.export default
<export>
export const modalReducer = modalSlice.reducer;
=> import {modalReducer} from "경로";
------------------------------------------------------------------
<export default>
export default modalReducer = modalSlice.reducer;
or
export default modalSlice.reducer;
=> import modalReducer from "경로";
- default로 내보내는 경우 이름 없이 바로 값으로도 내보낼 수 있습니다. (변수 선언 불필요)
- default로 내보내는 경우 import 할 때
{}가 필요가 없습니다. 이름도 동일하게 해야할 필요가 없습니다.
cf. export 방식은{안에 작성}+정확한 이름으로 import 해야합니다.
?
그러면 default만 사용하면 되는거 아닌가?
- export default는 한 파일당 한개만 가능합니다.
- export는 여러 개를 export 가능 합니다.
<Aabcdefghi.tsx>
const A = 100;
exprot default A;
export const abc;
export const def;
export const ghi;
------------------
import A, {abc, def, ghi} from './Aabcdefghi';위와 같은 차이가 있고, 한 파일에서 둘 다 사용도 가능합니다.
프로젝트 구조
public
- 정적 파일을 보관 (HTML 같이 변화가 없이 고정된 파일들)
- 리액트가 직접 제어하지 않는 파일입니다.
src
- 앱 코드들이 들어있는 폴더 // 앱의 모든 코드의 시작점입니다.
- 컴포넌트, 라우터, 전역 상태 등 대부분의 주요 로직을 담고있습니다.
assets
- 흔히 말하는 에셋폴더
- 이미지, 아이콘, 스타일 등 정적 파일 모음
components
- 리액트의 컴포넌트가 담긴 폴더 (재사용 가능한 UI 컴포넌트 모음)
- 파일이 많아지면 세부 기능마다 폴더를 구분하고, index.tsx에서 관리/정리합니다.
hooks
- 훅 저장소
store
- Redux 관련 파일 (상태관리)
type(s)
- 전역 타입 정의 파일
- 공통으로 쓰이는 인터페이스, 타입들을 모아서 관리합니다.
*기타 store나 type같은 경우도 index.ts 파일에서 각각 모아서 관리합니다.
store > reduce / slice
slice
import {createSlice} from "@reduxjs/toolkit";
const modalSlice = createSlice({
name : 'modal', // slice 이름
initialState, // 초기 상태
reducers: { // 상태를 바꾸는 함수 (액션 생성자 포함)
}
})- 하나의 상태 단위 입니다.
- state(상태) + action + reducer(로직) 가 하나로 합쳐진 단위입니다.
reducer
- 상태를 바꾸는 함수 입니다.
- 자동으로 action도 생성됩니다.
Redux 흐름
Action(객체) Dispatch(함수) => reducer 함수 type return => Redux Store State 업데이트 => React Componenet rerendering
GPT로 보충
Action: 상태를 바꾸기 위한 요청 정보
Dispatch: 액션을 실제로 실행시키는 함수
Reducer: action을 받아서 어떻게 상태를 바꿀지 정의하는 함수
- reducer가 새 state를 반환하면 -> store가 해당 state를 업데이트 합니다.
- store는 provider를 통해 리액트에 연결되어 있습니다.
=> Dispatch로 Action을 날리면 Reducer가 Store의 상태를 변경하고, 연결되어 있는 컴포넌트는 자동으로 다시 렌더링합니다.
why?
타입스크립트로 CSS를 작성한 파일을 import 할때 왜 .css.ts 가 아닌 .css 인 이유
파일명.css.ts ❌
파일명.css ⭕
.css.ts 파일은 TypeScript가 맞지만, 파일내부에서 작성된 스타일은 컴파일 될 때 .css 파일처럼 처리됩니다.
=> 파일명.css 로 작성해야함
import { 스타일이름, 스타일이름2 ~ } from './파일명.css --- 파일명.css.ts의 스타일을 가져옴
~
<div className = {스타일이름}>
style1
</div>타입스크립트에 익숙해질 시간이 더 필요해..
리액트 프로젝트와 함께 학습하는 내용도 많고, 속도가 빠르다고 느껴지는 상황인데, 타입스크립트, 리액트 개인학습의 시간이 더 필요하다고 느껴짐.
