[새싹x코딩온] 풀스택 개발자 부트캠프 과정 12 주차-2 React Router, 상태관리, Context

React Router📌

리액트 라우터란 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리입니다 다양한 환경에서 동작할 수 있도록 여러 종류의 컴포넌트를 제공합니다

 

• BrowserRouter
• Routes
• Route
• Link
• createBrowserRouter

등 을 제공합니다

BrowserRouter📌

HTML5를 지원하는 브라우저의 주소를 감지하고 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 하는 기능을 담당합니다 URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치합니다

<BrowserRouter>
    <App />
  </BrowserRouter>

 

Routes,  Route 📌

Routes는 경로가 일치하는 컴포넌트를 렌더링해주도록 경로를 매칭하는 역할을 합니다

Route는 어떤 경로 요청을 했을때 구체적으로 어떤 컴포넌트를 렌더링 할지 결정합니다

path="경로" , element={컴포넌트}

function App() {
  return (
    <>
      <PracticeHeader />
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/student/:name" element={<Student />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
}

 

Link 📌

Link는 클라이언트에서 네이게이션(이동)역할을 하는 데 사용됩니다 페이지를 새로고침하지 않고 다른 경로로 이동할 수 있도록 해주는데 경로 이동뿐만 아니라 state 상태도 함께 전달할 수 있습니다

return (
    <div>
      <h1>홈 페이지</h1>
      {/* state 값을 함께 전달 */}
      <Link to={{ pathname: "/detail", state: { message: "안녕하세요!" } }}>
        상세 페이지로 이동
      </Link>
    </div>
  );

pathname은 변경하여 서용이 불가능합니다 to 객체의 속성으로 지정된 이름이기 때문!

 

상태관리 State 종류📌

리액트의 기본 상태관리 State는 3개 정도를 알아볼 수 있는데 

Local State (로컬상태) : 각각 컴포넌트가 소유하고 있는 상태를 의미. 이 상태는 해당 컴포넌트 내에서만 관리되고 사용됨

Cross-Component State : 두 개 이상의 컴포넌트 간에 공유되는 상태를 의미합니다 즉! 하나의 컴포넌트에서 변경한 상태가 다른 컴포넌트에도 영향을 미치는 경우를 크로스 컴포넌트 상태라고합니다

App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태. 여러 컴포넌트, 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태에서 사용된다 이때 최하위 컴포넌트에 상태를 전달하려면 Props이어 주고 또 이어줘서 전달해야 하는데 이렇게 되면 Props지옥이 펼쳐지게 됩니다 이런 단점을 보완하기 위한 상태관리가 ContextAPI 또는 Redux입니다 보통 Cross-Component State 와 App-Wide State 일 때 주로 사용됩니다

 

좀 더 쉽게 알아보자!

 

App에서 사용하는 데이터가 있을 때 C컴포넌트와 E컴포넌트에서도 사용하고 싶을 경우엔 컴포넌트 계층 구조에 따라 순차적으로 props로 넘겨줘야 합니다 이런 방식을 props drilling 이라고하는데 사용하지 않는 B, D 컴포넌트에서도 Props로 받기 때문에 효율적이지 못한 방식입니다 그러면 어떻게 효율적으로 상태관리를 할 수 있을까?

 

useContext

context는 리액트에서 컴포넌트 간 특정 값을 공유할 수 있도록 state를 전역화시켜 계층구조와 상관없이 필요한 컴포넌트에서 바로 state를 불러와 사용할 수 있도록 해주는 훅입니다 이 훅을 사용하면 props 지옥을 만들지않고 사용할 수 있습니다

// context 객체를 만드는 메서드입니다 매개변수로 context의 기본값을 설정할 수 있습니다
const test = createContext(defaultValue)

 

Context에는 Provider 라는 메서드값이 존재하는데 Context 사용 시 전역state를 사용할 컴포넌트를 반드시 감싸줘야 합니다

<Test.Provider value={{값,set값}}>
<Todo />
<Test.Provider>

 

이렇게 Provider 로 감싸준 컴포넌트는 계층구조 상관없이 props를 사용하지 않아도 언제든 state를 사용할 수 있습니다 

 

주의사항📌

Context의 주 용도는 복잡하게 네스팅 된 많은 컴포넌트에게 데이터를 전달하는 용도입니다

Context를 사용하면 재사용하기가 어렵기 때문에 꼭 필요할 때만 사용해야 합니다