📌 웹 렌더링
📣 SPA
- Single Page Application
- 단일 웹페이지로 돌아가는 애플리케이션 (index.html)
- 브라우저에서 JS를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작
- 검색 엔진 최적화(SEO)에 적합하진 않음
- React, Svelte, Vue.js와 같은 라이브러리로 개발 가능
MPA
- Multi Page Application
- 여러 페이지를 만들고, 각 요청에 따라 적절한 페이지를 보여주는 방식
📌 React Router
라우팅 이란?
- 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 → 경로를 지정하는 행위!
- 가장 많이 쓰이는 라이브러리 : React Router
개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
- 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공
- 주요 컴포넌트
- BrowserRouter
- Routes
- Route
- Link
- createBrowserRouter
npm i react-router-dom@6 # 버전6 지정 설치📣 컴포넌트
컴포넌트란?
- 재사용 가능한 웹의 구성요소
- 웹 응용 프로그램에서 재사용 가능한 구성 요소를 만들 수 있게 해주는 일련의 표준 기반 웹 플랫폼 API 세트
🟠 BrowserRouter
- <BrowserRouter>
- HTML5를 지원하는 브라우저의 주소 감지
- Router의 역할
- 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링해주는 기능 담당
- URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치해야 함
import { BrowserRouter } from 'react-router-dom';
const ReactRouter = () => {
return (
<div>
<BrowserRouter>
</BrowserRouter>
</div>
);
};🟠 Routes, Route
- <Routes>, <Route>
- 경로가 일치하는 컴포넌트를 렌더링해주도록 경로 매칭
- Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정
<Routes>
<Route path="/" element={<RouteMain />}></Route>
<Route path="/product/:id" element={<RouteProduct />}></Route>
<Route path="*" element={<RouteNotFound />}></Route>
</Routes>
// element: 연결할 컴포넌트🟠 Link
- <Link>
- 경로를 변경함
- 기존 HTML의 a태그가 새로고침 해 랜더링을 수행했다면, <Link> 컴포넌트는 페이지 전환을 방지함
<Link to="/">
<h1>헤더입니다.</h1>
</Link>📣 Hook
🟠 URL 파라미터
- useParams()
- /product/:id
- 경로에 :를 사용해 설정하는 것
- URL 파라미터가 여러 개인 경우 /product/:id/:name 처럼 설정
import { useParams } from 'react-router-dom';
const { 파라미터명 } = useParams();
// const 변수명 = useParams().파라미터명;🟠 URL 쿼리스트링
- useSearchParams()
- localhost:3000/?mode=Dark
const [searchParams, setSearchParams ] = useSearchParams();
...
searchParams.get('mode');
...
setSearchParams({ mode: 'Dark' });🟠 페이지 이동
- useNavigate()
- Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 경우, 뒤로가기 등에 사용
const navigate = useNavigate();
...
<li><button onClick={() => naviate(-2)}>Go 2 pages back</button></li>
<li><button onClick={() => naviate('/')}>Go Root</button></li>📌 React Hook Form
- React 어플리케이션에서 폼을 쉽게 관리
- 폼의 상태 관리와 유효성 검사를 간단하게 만들어 줌
npm install react-hook-form📣 주요 키워드
- register
- 입력 요소에 연결하기 위한 함수
- 입력 요소에 유효성 검사 규칙 설정
- handleSubmit
- 폼의 제출을 처리하기 위한 함수
- 해당 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행
- watch : 특정 폼 필드의 값을 실시간으로 관찰하는 함수
- formState : 폼의 상태를 나타내는 객체 (ex. errors, isValid, isDirty, isSubmitted 등의 상태 포함)
import React from 'react';
import { userForm } from 'react-hook-form';
function ExampleForm() {
const { register, handleSubmit, formState: { errors }, } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="example" ref={register({ required: true })} />
{errors.example && <span>This field is required</span>}
<button type="submit">Submit</button>
</form>
);
}📌 Redux
📣 state 종류
- Local State : 각각의 컴포넌트가 소유하고 있는 상태를 의미
- 해당 컴포넌트 내에서만 관리되고 사용됨
- Cross-Component State : 두 개 이상의 컴포넌트 간에 공유되는 상태
- props를 통해 상태 전달
- App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태
- 여러 컴포넌트, 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태에 사용됨
→ Cross-Component와 App-Wide State일 때 Context API나 Redux가 요구됨
📣 redux란?
JavaScript 상태 관리 라이브러리
- 리액트를 배울 때 많이 나오는 용어지만, 꼭 리액트에 종속되는 개념 X
- 리액트의 상태 관리 라이브러리로 가장 많이 사용됨
📣 redux 사용 이유
- 컴포넌트 수가 많은 대형 프로젝트에서는 state를 전해주기 위해 props를 엄청 많이 써야 하는 경우 발생 → props 지옥
- redux를 사용할 경우, 전역으로 상태 관리가 가능하여 state를 props로 수없이 전달하지 않고, store라는 곳에서 언제든지 꺼내 쓸 수 있음
📣 redux 용어 정리
🟠 Store
- Store는 상태가 관리되는 오직 하나의 공간
- 스토어 안에는 현재 애플리케이션 상태와 Reducer가 들어가 있음
- 한 개의 프로젝트는 단 하나의 Store만 가질 수 있음
- Store에 있는 데이터는 컴포넌트에서 직접 조작하지 않고, Reducer 함수 사용
🟠 Action
- 상태에 어떠한 변화가 필요하면 Action 발생
- Action은 컴포넌트에서 Store에 운반할 데이터를 말함
- Action은 하나의 객체로 표현됨
- Reducer가 수행할 작업 설명
{
type: 'CHANGE_INPUT',
text: '안녕하세요'
}
{
type: 'INCREASE'
}🟠 Dispatch
- Action을 발생시키는 것
- dispatch(action)과 같은 형태로 Action 객체를 파라미터로 넣어서 호출
🟠 Reducer
- Action의 type에 따라 변화를 일으키는 함수
- 첫번째 매개변수는 현재 상태값, 두번째 매개변수는 Action 값
- 항상 새로운 상태 객체 반환
- HTTP 요청, 데이터 저장 같은 것을 하면 안됨
const initialState = {
counter: 1
};
function reducer(state=initialState, action) {
switch(action.type) {
case 'INCREMENT':
return {
counter: state.counter + 1
};
default:
return state;
}
}📌 Redux 시작하기
📣 redux 적용
- 모듈 설치
npm install redux react-redux @reduxjs/toolkit@redux/toolkit
- Redux의 복잡성을 줄이기 위해 만들어진 도구
- action 생성, reducer, 미들웨어 등 redux와 관련된 기능들을 효율적으로 구현
🟠 redux를 react에 적용하기
import { Provider } from "react-redux"
import store from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);🟠 userSelector, useDispatch
import { useSelector, useDispatch } from "react-redux";
...
const number = useSelector(state => state.number);
...- useSelector
- redux Store의 상태 값을 조회하기 위한 hook 함수
- 인자로 함수를 넘겨줘야 함
- 그 함수는 state를 매개변수로 받을 수 있고, return 값은 원하는 state 변수 값 설정
const dispatch = useDispatch();<button onClick={() => {dispatch({type:'INCREASE'})}}>+1</button>
<button onClick={() => {dispatch({type:'DECREASE'})}}>-1</button>- useDispatch
- Action을 발생시키는 dispatch 함수를 실행하는 hook 함수
- 인자로 원하는 Action 객체를 넘겨줘야 함
📌 Redux Toolkit
- configureStore()
- Redux 스토어를 생성하기 위한 함수
- 여러 미들웨어와 Reducer를 쉽게 통합할 수 있으며, Redux DevTools 확장 프로그램과의 통합도 제공
- createSlice()
- Reducer와 Action을 함께 생성하는 함수
- 슬라이스라는 개념을 사용하여 Action 타입, Action 생성 함수, Reducer를 한 번에 정의
const counterSlice = createSlice({
name: "counter",
initialState: initialCounterState,
reducers: {
increment(state) {
state.counter++;
},
decrement(state) {
state.counter--;
},
increase(state, action) {
state.counter = state.counter + action.payload;
},
},
});
const store = configureStore({
reducer: { counter: counterSlice.reducer, auth: authSlice.reducer },
});
export const counterActions = counterSlice.actions;
export const authActions = authSlice.actions;
export default store;Chrome 확장 프로그램 Redux DevTools
npm install redux-devtools-extensionimport { composeWithDevTools } from "redux-devtools-extension"; ... const store = configurationStore({reducer: reducer}, composeWithDevTools());
- Store된 State 확인 가능
자아를 찾아 떠나는 중,,,