Redux에서 데이터 다루기

이전 섹션에서 우리는 Redux의 기본 동작 방식을 구현했고, 이제 여러분은 Redux 애플리케이션의 주요 작동 원리를 알고 있습니다. 다음 강의들에서 우리는 우리의 제품 애플리케이션에 기능을 추가하고 데이터를 다루기 시작할 것입니다.

애플리케이션이 새로운 컴포넌트와 라우트로 확장될 것이므로, 라우팅과 관련해 한 가지 작업을 해봅시다. 제품 애플리케이션을 연 다음, root.jsx 파일을 여세요. 여기에 Outlet 컴포넌트를 임포트하고, ProductsList와 NewProductForm를 임포트하는 줄은 삭제하세요:

import { Outlet } from 'react-router-dom'

이제 Root 컴포넌트는 루트 경로 '/'에 표시될 것이며, 다른 모든 컴포넌트는 Outlet의 자식 경로에 표시될 것입니다. 이를 위해 Root 컴포넌트의 #main-page 디브의 마크업을 약간 수정하겠습니다:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

여기서 우리는 컴포넌트 NewProductForm와 ProductsList 대신 Outlet를 배치하겠습니다:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

이제 제품 추가 폼은 ProductsList 안에 출력할 것입니다. 이 컴포넌트가 있는 파일을 열고 폼을 임포트해 추가합시다:

import { NewProductForm } from './NewProductForm'

이제 제품 목록 바로 앞에 폼 컴포넌트를 추가하겠습니다. 이제 우리의 마크업은 다음과 같이 보일 것입니다:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

index.css에 products-list 클래스에 대한 스타일을 추가로 작성하겠습니다:

.products-list {
	display: flex;
	flex-direction: column;
}

이제 주요 컴포넌트 App에 변경사항을 적용하기만 하면 됩니다. App.jsx를 열고 여기에 ProductsList 컴포넌트를 임포트하세요:

import { ProductsList } from './parts/products/ProductsList'

그런 다음, 우리의 유일한 루트 라우트에 children 속성을 추가하세요:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

그리고 이 속성의 값으로 첫 번째 자식 라우트를 설정하겠습니다. 경로는 'products'로 설정합니다. 이제 이 주소에서 우리의 제품 목록 ProductsList가 표시될 것입니다:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

우리 애플리케이션을 실행하고 아무것도 망가뜨리지 않았는지 확인해 봅시다. 루트 '/'에서는 제목만 볼 수 있습니다. 그리고 폼과 제품 목록은 '/products' 주소에 숨어 있습니다.

여러분의 학생 애플리케이션을 여세요. root.jsx 파일에서 StudentsList와 NewStudentForm 컴포넌트를 Outlet로 교체하세요.

이제 학생 추가 폼이 여러분의 StudentsList 안에 표시되도록 하세요.

여러분의 주요 컴포넌트 App에 변경사항을 적용하세요. 루트 라우트에 경로가 '/students'인 자식 라우트를 추가하세요. 이 경로에서는 여러분의 StudentsList가 표시될 것입니다. 애플리케이션을 실행하고 모든 것이 작동하는지 확인하세요.