🧹최적화2

🚨useReducer

리액트에서 상태변화를 업데이트 해주는 훅(Hook) 함수중 하나로 useState와 비슷한 역할이지만 useState보다 더 복잡한 상태관리를 할 때 사용 된다. 어떻게 복잡한 상태관리를 하게 되는지는 아래를 참고하자.

➕reducer에 대해서 먼저 알아야한다.

reducer는 컴포넌트 밖에서 선언되어 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수이다.

아래 코드로 기본 문법을 보아라.

state: 현재 상태
action : 상태를 변경하기 위한 정보를 담고 있는 객체로 action 객체는 type 필드를 반드시 가지고 있어야 하며, 그 외의 필드는 상태 변경에 필요한 값들을 담고 있다.

const reducer = (state, action) => {
  switch (action.type) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      const created_date = new Date().getTime();
      const newItem = {
        ...action.data,
        created_date
      };
      return [newItem, ...state];
    }
    case "REMOVE": {
      return state.filter((it) => it.id !== action.targetId);
    }
    case "EDIT": {
      return state.map((it) =>
        it.id === action.targetId
          ? {
              ...it,
              content: action.newContent
            }
          : it
      );
    }
    default:
      return state;
  }
};
.
.
.

➕useReducer에 대한 이해

const [state, dispatch] = useReducer(reducer, initialState);

state : 컴포넌트에서 사용할 상태
dispatch: 내부에 객체로 type과 현재 state값을 담고 useReducer의 트리거가 되는 함수
reducer: reducer함수로 로직이 담겨 있음
initialState: 초기화 상태

흐름을 보면
1. 화면 요청과 초기 렌더링.
2. initialState값으로 state 초기화 그리고 reducer 함수 렌더링.
3. dispatch함수를 통해 useReducer함수를 거쳐 reducer함수 사용.
4. reducer 함수를 통해 반환된 상태로 변경

아래 코드를 통해서 기능에 대한 로직이 분리되고 컴포넌트 부분에서는 어떤 기능을 사용할지 dispatch를 통해 reducer에서 사용될 상태와 함수를 정한다.
{type: 어떤기능을 사용하고 data: 어떤 상태를 주입하겠습니다.}

// 위와 같이 로직이 컴포넌트와 분리가 된다.
const App = () => {
  const [data, dispatch] = useReducer(reducer, []);
  .
  .
  .
  const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++
      };
    });

    dispatch({ type: "INIT", data: initData });
  };

  const onCreate = useCallback((author, content, emotion) => {
    dispatch({
      type: "CREATE",
      data: { author, content, emotion, id: dataId.current }
    });
    dataId.current += 1;
  }, []);

➕useReducer를 통해 기능을 분리하는 이유

보통의 useState를 사용하면 상태에 관련한 함수들이 많을 경우 혼재되어 해당 코드를 찾으려면 시간이 걸리게 된다. 가독성이 저하되고 유지보수성까지 저하된다.

useReducer를 통해 상태 업데이트에 대한 기능을 컴포넌트와 무관하게 분리 시키며 해당 기능들만 선언하여 관리할 수 있으며 선언과 사용을 분리 시켜서 가독성과 유지보수에서도 장점을 가진다.

🚨context

일반적으로 다른 언어와 프레임워크를 배울 때와 마찬가지로 context라는 공유영역을 통해 전역적인 값이나 행위에 대해서 사용하고는 했다.
React에서도 Context는 컴포넌트 트리 전체에서 데이터를 공유할 수 있도록 해주는 방법으로 아래 예제 코드와 같이 중간에 있는 컴포넌트들이 props를 통해 데이터를 전달 하는 과정을 안거쳐도 된다.

//App > DiaryList > DiaryItem로 연결되는 컴포넌트.
// DiaryList에서는 onRemove와 onEdit이 거쳐가기만 한다.
const App = () => {
	return (
    .
    .
    .
     <DiaryList diaryList={data} onRemove={onRemove} onEdit={onEdit} />

    )
}

const DiaryItem = ({
  onRemove,
  onEdit,
  id,
  author,
  content,
  emotion,
  created_date
}) => {
  .
  .
  .
}

➕context 사용 방법

Context를 사용하면 Provider와 Consumer라는 두 가지 컴포넌트가 있다.

Provider는 Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 역할로 Provider 컴포넌트는 value라는 prop을 받아서 이 값을 하위에 있는 컴포넌트들이 사용할 수 있게 전달한다.

Consumer는 Provider로 받은 값에 대해서 사용하는 컴포넌트를 만드는데 이는 useContext라는 Hook 함수를 사용하면 대체 가능하다.

아래는 사용예제이다.

// 상태를 공유할 context 영역을 만든다.
// 상태를 변화시킬 함수를 공유할 context 영역을 만든다. 분리 이유 아래에 적음
export const DiaryStateContext = createContext(null);
export const DiaryDispatchContext = createContext(null);

const App = () => {
  /*
  context가 랜더링 될 때 안에 들어간 요소들도 모두 랜더링되기때문에 최적화가 풀리게 된다. 
  따라서 상태에 대한 context와 기능에 대한 context를 분리해준다.
  거기에 기능에 대한 것들을 useMemo로 한번 더 감싸줘서 context에 등록해준다.  
  (사용할때는 감싸준것이 아닌 각각으로 불러도 괜찮은 듯)
  */
  const memoizedDispatch = useMemo(() => {
    return { onCreate, onRemove, onEdit };
  }, []);
  .
  .
  .
  // 가장 바깥에 Provider컴포넌트에 value를 줘서 감싸주면 끝 
  return (
    <DiaryStateContext.Provider value={data}>
      <DiaryDispatchContext.Provider value={memoizedDispatch}>
        <div className="App">
          <DiaryEditor />
          <div>전체 일기 : {data.length}</div>
          <div>기분 좋은 일기 개수 : {goodCount}</div>
          <div>기분 나쁜 일기 개수 : {badCount}</div>
          <div>기분 좋은 일기 비율 : {goodRatio}%</div>
          <DiaryList />
        </div>
      </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>
  );
};


//사용에 대해서는 아래와 같이 useContext를 이용하여 사용

const DiaryList = () => {
  const diaryList = useContext(DiaryStateContext);
  .
  .
  .
  .
}


const DiaryItem = ({ id, author, content, emotion, created_date }) => {
  const { onRemove, onEdit } = useContext(DiaryDispatchContext);
  .
  .
  .
}

---

🚀React와 SPA

🎈Multi Page Application

지금까지 내가 만들었던 자바 프로젝트를 보면 아래와 같이 하나의 프로젝트에 여러개의 화면
즉, html template를 만들고 웹서버와 소켓을 이용해서 요청을 받고 바인딩 되어있는 값들에 맞춰 애플리케이션 화면을 넘겨주었다.

아래에는 MPA즉 하나의 애플리케이션에 여러개의 템플릿을 사용하여 구성되어있는 페이지의 이동간을 캡쳐한 사진이다.

화면 이동 중 새로고침 표시가 돌아가면서 내부적인 처리가 완료되어 응답을 줄 때까지 딜레이 되는 것을 확인할 수 있다.

장점으로는 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩이 매우 짧다는 것이 있고 내부적으로 서버단에서 처리하는 영역이 많기 때문에 보안적으로도 우수할 수 있다.

단점으로는 SPA에 비해 사용자 경험이 좋지 못하다는 것이 있다.
(예시 : 벤츠 홈페이지)

🎈CSR과 SSR

🚨 CSR(Client Side Rendering)

브라우저에서 페이지를 렌더링하며 CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다.
CSR은 초기 로딩 속도가 느리지만, 사용자와 상호작용 할 때마다 필요한 데이터만 서버에서 가져오기 때문에 이후에는 빠른 반응성을 보인다.

🚨 SSR(Server Side Rendering)

서버에서 페이지를 렌더링하며 필요한 부분의 HTML과 스크립트만 불러온다.
SSR은 초기 로딩 속도가 빠르지만, 이후에는 느린 반응성을 보인다.

나는 SSR에서 페이지 이동마다 로딩 걸리는 것만 느껴진다.
그만큼 CSR이 사용자 경험이 좋다는 이야기

🎈Single Page Application

index.html (entry point) 에서 JS와 프레임워크를 통해 요청에 따른 HTML요소만을 변경하여 화면을 바꿔주며 사용자 경험에 우선을 둔 방법

🚨페이지 라우팅

라우팅이란? 경로를 정해주는 행위 그 자체를 의미한다.

따라서 페이지 라우팅이란 요청에 따라 어떤 페이지로 가야하는지 경로를 알려주는 과정을 의미한다.

🚨react-router-dom@6

리액트에서 페이지 라우팅을 구현하기 위한 라이브러리이다.
라우터 api에 대해서 추가하고 항상 최신버전인지 확인!

라이브러리 사용 형식
BrowserRouter는 HTML5 history API를 사용하여 클라이언트 측에서 라우팅을 처리.
Routes는 여러 경로를 처리하는 데 사용되며,
Route는 경로와 해당 경로에 대한 컴포넌트를 매핑.

라이브러리의 주요 기능
path variable 이라는 기능 -> useParams를 이용해서 url에 변수로 지정
Query String 처리 기능 -> useSearchParams 함수를 이용해서 쿼리스트링으로 온 변수들을 저장
page moving - > useNavigate()을 이용해서 지정한 페이지로 보내는 것 -1을 넣으면 뒤로 가기 가능

아래는 사용에 대한 예제 코드

import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";


function App() {
	return (
    	  <BrowserRouter>
            <div className="App">
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/new" element={<New />} />
                <Route path="/edit/:id" element={<Edit />} />
                <Route path="/diary/:id" element={<Diary />} />
              </Routes>
            </div>
        </BrowserRouter>
    )
}

import { useNavigate, useParams } from "react-router-dom";


const Diary = () => {
  const { id } = useParams();
  .
  .
  .
  return (
    <div className="DiaryPage">
    	<MyHeader
          headText={`${getStringDate(new Date(data.date))} 기록`}
          leftChild={
            <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
          }
          rightChild={
            <MyButton
              text={"수정하기"}
              onClick={() => navigate(`/edit/${data.id}`)}
            />
          }
        />
    .
    .
    .
  )
}