사용자 정보 및 행동의 효과적인 관리는 사용자 상호 작용의 기록과 인증된 세션의 보존을 가능하게 하기 때문에 최신 웹 애플리케이션의 기본 요소입니다. 예를 들어 온라인 쇼핑 바구니에 항목을 추가하는 등의 작업은 유능한 상태 관리에 크게 의존합니다.
상태 관리자는 애플리케이션이 원하는 결과를 얻기 위해 데이터를 검색하고 조작할 수 있도록 하는 데 중요한 역할을 합니다. Next.js는 상태 관리를 위한 다양한 옵션을 제공하지만, 이 매뉴얼에서는 이 목적을 위해 Redux 툴킷을 사용하는 데 집중할 것입니다.
Redux Toolkit을 사용한 Next.js의 상태 관리
Next.js 애플리케이션의 일반적인 상태 관리 아키텍처는 글로벌 상태와 로컬 상태를 모두 포함합니다. 글로벌 상태는 애플리케이션 내의 모든 컴포넌트 간에 공유되는 공통 정보(예: 사용자 인증 상태)와 관련된 반면, 로컬 상태는 각 컴포넌트가 보유한 독점적인 데이터를 나타냅니다.
애플리케이션의 올바른 작동은 종종 글로벌 상태와 로컬 상태 모두에 의존하여 애플리케이션의 일반적인 상태를 효과적으로 관리함으로써 효과적인 데이터 관리를 가능하게 합니다.
JavaScript 애플리케이션 내에서 상태를 관리하기 위한 도구로 Redux를 사용하는 것이 널리 보급되었지만, 특히 프로젝트 규모가 상대적으로 작은 경우 구현이 복잡해질 수 있습니다.
반복되는 단점은 액션 카테고리, 액션 제너레이터, 리듀서를 지정하기 위해 장황한 상용구 코드를 작성해야 한다는 점이며, 이로 인해 중복 코드가 누적될 수 있습니다.
이러한 문제를 극복하기 위해 Redux 툴킷 (RTK)이 등장했습니다. 주로 Redux 상태 관리 라이브러리로 작업할 때 개발 경험을 간소화하는 것을 목표로 합니다. 일반적인 Redux 작업을 간소화하는 도구와 유틸리티 세트를 제공하여 과도한 상용구 코드가 필요하지 않습니다.
Next.js 애플리케이션에서 Redux 툴킷 시작하기
먼저 Next.js 프로젝트를 생성한 다음 다음 프로세스를 통해 필요한 종속성을 설치하여 Next.js 애플리케이션에서 상태 관리를 위해 Redux 툴킷을 활용할 수 있습니다.
터미널에서 다음 명령을 실행하여 로컬에 새 Next.js 프로젝트를 생성하세요:
프로젝트가 생성되면 다음 명령을 실행하여 프로젝트 디렉토리에 액세스합니다:
마지막으로, Node의 패키지 관리자 역할을 하는 npm을 사용하여 프로젝트 내에 필요한 모든 종속성이 설치되어 있는지 확인해야 합니다.
기본 Next.js 프로젝트를 설정하면 상태 관리를 위해 Redux 툴킷을 사용하는 Next.js 애플리케이션 데모를 구성할 준비가 된 것입니다.
이 프로젝트의 소스 코드는 앞서 언급한 GitHub 리포지토리에서 찾으세요.
Redux 스토어 구성
Redux 스토어는 애플리케이션의 전체 정보를 포괄하는 통합 저장소입니다. 모든 구성 요소에 대한 데이터의 기본 배포자 역할을 하며 상태를 정확하게 유지합니다. 상태를 감독하고 규제하는 책임은 스토어에 있으며, 스토어는 액션과 리듀서를 통해 이 작업을 수행하여 애플리케이션 전반에서 효율적인 상태 관리를 보장합니다.
Redux 스토어를 구성하는 프로세스에는 Next.js 프로젝트의 루트 레벨에 새 “redux” 폴더를 생성한 다음 이 폴더 내에 새 “store.js” 파일을 생성하는 것이 포함됩니다. 이 파일의 내용에는 다음이 포함되어야 합니다:
import {configureStore} from '@reduxjs/toolkit';
import profileReducer from './reducers/profileSlice';
export default configureStore({
reducer:{
profile: profileReducer
}
})
앞서 언급한 코드에서는 Redux 스토어를 생성하고 구성하기 위해 `configureStore` 함수를 사용합니다. 이 프로세스에는 스토어 구성 내의 감속기 객체를 통해 감속기를 지정하는 작업이 포함됩니다.
여기에 설명된 바와 같이 리듀서의 역할은 특정 동작 또는 지정된 발생에 반응하여 애플리케이션의 상태를 수정하는 방식을 지시하는 지침을 공식화하는 것을 포함합니다. 특히 프로파일 리듀서는 프로파일 상태와 관련된 작업을 감독할 책임이 있습니다.
Redux 저장소의 구현은 Redux 툴킷이 제공하는 이점과 기능을 활용하여 애플리케이션의 전체 상태를 제어하기 위한 기본 토대 역할을 합니다.
상태 슬라이스 정의
Redux 상태 슬라이스는 미리 결정된 Redux 스토어 내에서 특정 데이터 요소의 상태를 유지 관리하는 근거를 포괄하는 구성 요소입니다. 이러한 슬라이스는 해당 슬라이스의 축소 로직, 액션 제너레이터, 액션 유형을 자동으로 생성하는 createSlice 함수를 사용하여 형성됩니다.
“redux” 디렉터리 내에 “reducers”라는 이름의 하위 디렉터리를 생성하세요. 새로 생성된 이 하위 디렉터리 내에 “profileSlice.js”라는 제목의 파일을 하나 더 생성해 주실 것을 정중히 요청드립니다. 이 특정 파일에 다음 코드를 포함시켜 주세요:
import {createSlice} from '@reduxjs/toolkit';
const profileSlice = createSlice({
name: 'profile',
initialState: {
name: 'none'
},
reducers: {
SET_NAME: (state, action) => {
state.name = action.payload
}
}})
export const {SET_NAME} = profileSlice.actions;
export default profileSlice.reducer;
앞서 언급한 코드는 createSlice 함수를 사용하여 사용자 프로필 상태에 대한 상태 슬라이스를 설정합니다. 이 엔티티는 슬라이스의 지정과 상태 속성의 기본값을 포함하는 초기 상태를 포함합니다.
슬라이스 객체는 이 섹션과 관련된 액션 핸들러를 지정하는 역할을 하는 리듀서 프로퍼티를 허용합니다. 특히 SET\_NAME이라는 단독 감속기 함수가 포함되었는데, 이 함수는 소환된 후 수반되는 정보로 상태를 구성하는 이름을 수정하는 것이 목적입니다.
생성 슬라이스 함수는 미리 정의된 감속기를 활용하여 액션 크리에이터와 해당 액션 유형을 자동으로 생성합니다. 내보낸 SET\_NAME 액션 제너레이터와 profileSlice.reducer는 생성된 액션 제너레이터와 프로파일 슬라이스에 의해 수행되는 환원 작업을 나타냅니다.
이 상태 조각의 구현을 통해 프로그램의 구성 부분이 SET\_NAME 작업을 활용하고 상태 내에서 프로파일 라벨을 수정하는 데 필요한 데이터를 전송할 수 있게 됩니다.
RTK의 상태 관리 기능을 테스트하기 위한 컴포넌트 생성
“pages” 디렉토리에 있는 index.js 파일을 열고 기존 Next.js 코드를 삭제한 후 후속 코드를 삽입하세요.
import styles from '@/styles/Home.module.css'
import {useRef} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {SET_NAME} from '../../redux/reducers/profileSlice'
function DisplayName(){
const {name} = useSelector((state) => state.profile)
return (
<h1> I am {name} !!</h1>
) }
export default function Home() {
const inputName = useRef()
const dispatch = useDispatch()
function submitName() {
console.log(inputName.current.value)
dispatch(SET_NAME(inputName.current.value))
}
return (
<>
<main className={styles.main}>
<input placeholder='enter name' ref={inputName} />
<button onClick={submitName}>Enter name</button>
<DisplayName />
</main>
</>
)}
이 코드는 사용자가 자신의 이름을 입력할 수 있는 기능적인 Next.js 컴포넌트를 생성하여 웹 페이지에 표시합니다. 애플리케이션의 상태를 효과적으로 관리하기 위해 Redux 툴킷을 활용합니다.
DisplayName 컴포넌트에는 사용선택자 후크 구현을 통해 Redux 저장소 내의 프로파일 상태에서 이름 값을 추출한 후 웹 페이지에 표시하는 기능이 탑재되어 있습니다.
“이름 입력” 버튼을 클릭하면 submitName 함수가 트리거되어 SET\_NAME 액션이 실행됩니다. 이 액션의 페이로드는 입력 값으로 구성되며, 이후 프로필 상태 내에서 이름 구성 요소를 수정합니다.
_app.js 파일 업데이트
Next.js 애플리케이션 전체에 Redux 툴킷을 통합하려면 전체 애플리케이션을 Redux 공급자로 둘러싸서 애플리케이션 범위 내의 모든 구성 요소에서 Redux 스토어와 그 구성 요소에 액세스할 수 있도록 해야 합니다.
import {Provider} from 'react-redux'
import store from '../../redux/store'
export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider> )
}
수정된 변경 사항을 구현하기 위해 개발 서버를 시작하고 테스트 목적으로 웹 브라우저에서 ”
npm run dev
페이지 새로 고침 시 데이터 재수화 처리
웹 페이지 새로 고침 시 데이터 재수화에는 애플리케이션의 상태를 복구하고 초기화하는 작업이 포함됩니다. Next.js의 서버 측 렌더링 설정에서 기본 상태는 처음에 서버에서 처리되고 이후 추가 처리를 위해 사용자에게 전송됩니다.
클라이언트의 자바스크립트 코드는 서버에서 전송한 직렬화된 상태를 가져와 역직렬화하여 애플리케이션의 상태를 복원하는 작업을 수행합니다.
필요한 데이터를 복원하고 사용자 세션을 보존하는 것은 이 애플리케이션 설계의 중요한 측면입니다. 이 전략을 구현하면 과도한 데이터 검색을 방지하고 여러 웹 페이지를 탐색하거나 앱을 다시 로드할 때에도 방해받지 않는 사용자 여정을 유지할 수 있습니다.
Next.js 애플리케이션에서 Redux 툴킷으로 작업하기
Redux 툴킷은 특히 간단한 특성과 사용자 친화적인 특성으로 인해 Next.js 애플리케이션 내에서 활용될 때 여러 가지 이점을 제공합니다. 액션, 감속기, 저장소 구성을 정의하는 데 필요한 상용구 코드의 양을 대폭 최소화함으로써 개발자는 애플리케이션의 상태를 관리하면서 생산성을 높일 수 있습니다.