코딩 연습장

Routes 안에는 Route만 들어갈 수 있음

동적 경로 (Dynamic Segments)

동적인 데이터를 포함하고 있는 경로

페이지 라우팅

경로에 따라 알맞은 페이지를 렌더링 하는 과정

페이지 라우팅의 원리

Multi Page Application(MPA)

애초에 서버가 여러개의 페이지를 가지고 있음많은 서비스가 사용하는 전통적인 방식

서버 사이드 렌더링 (Server Side Rendering)

• 미리 만들어진 페이지를 응답

but, React.js는 이 방식을 따르지 않음 (쾌적한 페이지 이동 제공이 어렵기 때문)

SPA (Single Page Application)

React App이 채택한 방식

클라이언트 사이드 렌더링 (Client Side Rendering)

React Context

컴포넌트간의 데이터를 전달하는 또 다른 방법

기존의 Props가 가지고 있던 단점을 해결할 수 있음

Props에 어떤 단점인 Props Drinlling을 해결

부모 컴포넌트

import { useState, useRef, useReducer, useCallback, createContext } from 'react';

export const TodoContext = createContext();
console.log(TodoContext);

return (
  <div className='app'>
    {/* <Exam /> */}
    <Header />
    <TodoContext.Provider value={{todos, onCreate, onUpdate, onDelete}}>
      <Editor />
      <List />
    </TodoContext.Provider>
  </div>
  )

자식 컴포넌트

import { useState, useRef, useContext } from 'react';
import { TodoContext } from '../App';

const Editor = () => {
    console.log(useContext(TodoContext));
    const {onCreate} = useContext(TodoContext);
}

생길 수 있는 문제

해결책

부모 컴포넌트

export const todoStateContext = createContext();
export const todoDispatchContext = createContext();

const memoizedDispatch = useMemo(() => {return {onCreate, onUpdate, onDelete}}, [])

return (
<div className='app'>
{/* <Exam /> */}
<Header />
<todoStateContext.Provider value={todos}>
  <todoDispatchContext.Provider value={memoizedDispatch}>
    <Editor />
    <List />
  </todoDispatchContext.Provider>
</todoStateContext.Provider>
</div>
)

자식 컴포넌트

import { todoDispatchContext } from '../App';

const Editor = () => {
    console.log(useContext(todoDispatchContext));
    const {onCreate} = useContext(todoDispatchContext);
}

import { todoStateContext } from '../App';

const List = () => {
    console.log(useContext(todoStateContext));
    const todos = useContext(todoStateContext); // 하나만 들어있어서 구조분해 할당이 아님
}

useMemo

"메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화하는 리액트 훅

React.memo

컴포넌트 인수를 받아, 최적화된 컴포넌트로 만들어 반환

최적화 (Optinization)

웹 서비스의 성능을 개선하는 모든 행위를 일컫음

아주 단순한 것부터 아주 어려운 방법까지 매우 다양함

React App 내부의 최적화 방법

• 컴포넌트 내부의 불 필요한 함수 재생성 방지
• 컴포넌트의 불 필요한 리렌더링 방지

useReducer

• 컴포넌트 내부에 새로운 State를 생성하는 React Hook
• 모든 useState는 useReducer로 대체 가능
• 상태 관리 코드를 컴초넌트 외부로 분리할 수 있음

라이프 사이클 제어