추가 라이브러리 설치 구현부터 React에서 제공하는 고유한 컨텍스트 API 활용에 이르기까지 상태 관리를 위한 몇 가지 전략을 Next.js에서 사용할 수 있습니다. 특히 이 접근 방식은 불필요한 종속성을 없애고 구현 프로세스를 간소화합니다.
React Context는 애플리케이션의 다양한 컴포넌트에 데이터를 전달하는 간소화된 접근 방식을 제공하므로 과도한 프로포절 드릴링이 필요하지 않습니다. 이 기술은 현재 사용자의 로그인 상태와 선택한 테마를 유지하는 것과 같은 글로벌 상태 관리를 처리할 때 특히 유용합니다.
React 컨텍스트 API 이해
코드를 효과적으로 분석하기 위해서는 React 컨텍스트 API에 대한 포괄적인 이해와 함께 이 API가 해결하고자 하는 특정 문제에 대한 인식이 필요합니다.
프로퍼티를 활용하면 컴포넌트 간에 정보를 원활하게 교환할 수 있어 부모 엘리먼트에서 자식 엘리먼트로 데이터를 효율적으로 전송할 수 있습니다.
이 방법의 장점은 개별 구성 요소의 특정 정보 활용과 해당 구성 요소의 계층 구조를 통한 해당 데이터의 진행 상황을 명확하게 보여줄 수 있다는 것입니다.
그럼에도 불구하고 동일한 속성을 필요로 하는 심오하게 내장된 요소를 활용할 때 어려움을 겪을 수 있습니다. 이러한 상황은 복잡성을 야기하고 잠재적으로 유지하기 어려운 복잡한 소스 코드로 이어질 수 있습니다. 이러한 복잡성 속에서 소품 드릴링의 단점을 발견할 수 있습니다.
React 컨텍스트는 애플리케이션 내의 여러 컴포넌트에 걸쳐 보편적으로 사용할 수 있어야 하는 데이터를 생성하고 활용하기 위한 중앙 집중식 접근 방식을 제공합니다.
구조화된 프레임워크의 구현은 관련 정보를 저장하기 위한 체계적인 저장소 역할을 하며, 다양한 기능에서 이러한 데이터를 효율적으로 검색하고 활용할 수 있도록 합니다. 이 방법론을 채택하면 일관되고 체계적인 조직을 촉진하는 방식으로 프로그래밍 구성을 효과적으로 정렬할 수 있습니다.
이 프로젝트의 소스 코드는 웹 브라우저 또는 명령줄 인터페이스를 통해 액세스할 수 있는 GitHub 리포지토리에서 사용할 수 있습니다.
Next.js에서 상태 관리 시작하기 13 React 컨텍스트 API 사용
Next.js 서버 컴포넌트를 활용하면 개발자는 클라이언트 측 애플리케이션의 동적 특성과 서버 렌더링 콘텐츠와 관련된 성능 이점을 원활하게 결합하여 상호 작용과 효율성 간의 최적의 균형을 통해 우수한 사용자 경험을 제공하는 애플리케이션을 구축할 수 있습니다.
Next.js 버전 13에서는 서버 컴포넌트의 구현이 안정화되었으며 기본적으로 앱 디렉토리 내에 위치합니다. 그럼에도 불구하고 모든 컴포넌트가 서버 측에서 렌더링되기 때문에 클라이언트 측 라이브러리 또는 React 컨텍스트와 같은 API를 통합하는 동안 문제가 발생할 수 있습니다.
이 문제를 방지하기 위해 권장되는 해결책은 클라이언트 측 코드가 포함된 파일에 적용할 수 있는 “클라이언트 플래그”를 활용하는 것입니다. 이렇게 하면 브라우저 환경 내에서 적절한 코드만 실행되도록 할 수 있습니다.
프로세스를 시작하려면 다음 단계에 따라 로컬 머신에 Next.js 13 개발 환경을 설정할 수 있습니다: 먼저 터미널을 열고 지정된 명령을 실행합니다. 이렇게 하면 현재 작업 공간에 새 Next.js 13 프로젝트를 쉽게 설정할 수 있습니다.
npx create-next-app@latest next-context-api
프로젝트를 설정한 후에는 파일 탐색기 또는 명령줄 인터페이스를 통해 해당 폴더로 이동하여 해당 폴더에 액세스합니다.
cd next-context-api
보다 정제되고 세련된 표현 방식을 활용하여 개발 서버를 시작하는 프로세스를 시작합니다.
npm run dev
기본적인 Next.js 프로젝트를 구축한 후, 상태 유지 관리를 위해 React 컨텍스트 API를 사용하는 기초적인 작업 관리 애플리케이션을 구축할 수 있습니다.
컨텍스트 공급자 생성
컨텍스트 공급자는 다양한 애플리케이션의 글로벌 상태를 관리하는 데 필수적인 구성 요소로, 시스템 내 여러 요소에 필요한 정보를 정의하고 제어할 수 있는 중앙 집중식 위치를 제공합니다.
“src/context” 디렉터리에 “Todo.context.js”라는 새 파일을 만들려면 텍스트 편집기나 Visual Studio Code 또는 React Native CLI와 같은 통합 개발 환경(IDE)을 사용해야 합니다. 다음은 이 파일을 코드로 채우는 방법의 예입니다: ”’자바스크립트 ‘react-redux’에서 { defineContext }를 가져옵니다; export default defineContext({ todos: [], actions: { ADD_TODO: ‘@addTodo’, CLEAR_TODOS: ‘@clearTodos’, TOGGLE_TODO: ‘@toggleTodo’ }, reducer: (state, action) => ({{ [action.type]: (state, todo) => { switch
"use client"
import React, { createContext, useReducer } from "react";
const initialState = {
todos: [],
};
const reducer = (state, action) => {
switch (action.type) {
case "ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };
case "DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
index !== action.payload) };
case "EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
index === action.payload.index ? action.payload.newTodo : todo);
return { ...state, todos: updatedTodos };
default:
return state;
}
};
export const TodoContext = createContext({
state: initialState,
dispatch: () => null,
});
export const TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<TodoContext.Provider value={{ state, dispatch }}>
{children}
</TodoContext.Provider>
);
};
현재 구성은 “TodoContext”라고 하는 컨텍스트 프레임워크를 설정하는데, 이 프레임워크는 처음 시작할 때 빈 작업 집합을 보유하며 애플리케이션 내에서 전체 작업 목록을 관리하는 기반 역할을 합니다.
이 특정 컨텍스트 배열은 초기 조건을 설정하는 것 외에도 여러 작업 범주를 개괄적으로 설명하는 감속기 함수로 구성됩니다. 이러한 작업 범주를 실행하면 수행된 작업에 따라 컨텍스트의 상태가 변경됩니다.특히 이러한 작업에는 할 일 항목의 추가, 삭제 및 수정이 포함됩니다.
TodoContextProvider 구성 요소는 사용 가능한 속성을 통해 TodoContext에 대한 액세스를 제공함으로써 다양한 애플리케이션을 위한 촉진자 역할을 합니다. 이 컴포넌트는 두 개의 매개변수를 허용하는데, 첫 번째 매개변수인 ‘value’ 속성은 컨텍스트의 기본 상태를 나타내며, 두 번째 매개변수인 ‘reducer’ 속성은 애플리케이션 내의 특정 조건이나 사용자 상호작용에 따라 컨텍스트 상태를 업데이트하는 특정 메서드를 나타냅니다.
TodoContext를 수집하면 컴포넌트는 고유한 처분을 열람하고 조건을 수정하는 작업을 시작할 수 있는 권한을 부여받습니다.
Next.js 앱에 컨텍스트 공급자 추가
컨텍스트 공급자가 Next.js 애플리케이션의 루트에 위치하여 모든 클라이언트 컴포넌트가 액세스할 수 있도록 하려면 앱의 루트 레이아웃 구성 요소에 컨텍스트를 포함시켜야 합니다.
이 작업을 수행하려면 “src/app/layout.js” 파일에 액세스하여 HTML 템플릿 내에서 자식 노드를 둘러싸고 필요한 컨텍스트 제공자를 적절히 통합하세요.
import './globals.css';
import { TodoContextProvider } from "@/context/Todo.context";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children
}) {
return (
<html lang="en">
<body>
<TodoContextProvider>{children}</TodoContextProvider>
</body>
</html>
);
}
To-Do 컴포넌트 생성
사용자가 효율적으로 작업을 관리할 수 있는 사용자 친화적인 애플리케이션을 개발하기 위해서는 React 프로젝트에 Todo 컴포넌트를 생성해야 합니다. 이 목표를 달성하려면 다음 단계를 따르세요: 1. 텍스트 편집기 또는 IDE를 열고 React 프로젝트의 “src” 폴더로 이동합니다. 2. 상단 메뉴 표시줄에서 파일 > 새 파일(또는 이와 동등한 옵션)을 선택하여 “src/components” 디렉토리 내에 새 파일을 생성합니다. 3. 새 파일의 이름으로 “Todo.js”를 입력하고 Enter 키를 눌러 확인합니다. 그러면 “Todo.js”라는 이름의 새 JavaScript 파일이 생성됩니다. 4. 4. 다음 코드를 복사하여 새로 만든 파일에 붙여넣습니다: ”’자바스크립트 import React, { useState } from ‘react’; const Todo
“자바스크립트 import { useClient } from ‘react’;
"use client"
import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";
그런 다음 사용자 인터페이스에 시각화될 자바스크립트 컴포넌트를 포함하는 기능적인 측면을 묘사합니다.
export default function Todo() {
return (
<div style={{ marginBottom: "4rem", textAlign: "center" }}>
<h2>Todos</h2>
<input
type="text"
value={todoText}
onChange={(e) => setTodoText(e.target.value)}
style={{ marginBottom: 16}}
placeholder="Enter a todo"
/>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{state.todos.map((todo, index) => (
<li key={index}>
{index === editingIndex ? (
<>
<input
type="text"
value={editedTodo}
onChange={(e) => setEditedTodo(e.target.value)}
/>
<button
style={{ marginRight: 16}}
onClick={() => handleEditTodo(index, editedTodo)}
>
Save
</button>
</>
) : (
<>
{todo}
<button
style={{ marginRight: 16}}
onClick={() => setEditingIndex(index)}
>Edit</button>
<button
onClick={() => handleDeleteTodo(index)}
>Delete</button>
</>
)}
</li>
))}
</ul>
</div>
);
}
주어진 구절은 작업 추가, 편집, 삭제를 위한 입력 필드와 관련 버튼을 포함하는 애플리케이션의 특정 기능에 대해 설명합니다. 현재 작업이 편집 중일 때만 편집 및 삭제 버튼을 표시하기 위해 React의 조건부 렌더링이 사용됩니다.
마지막으로, 함수형 컴포넌트 내에서 각 액션 유형에 필요한 상태 변수와 해당 이벤트 핸들러를 지정합니다. 해당 컴포넌트 내에 다음 코드 줄을 통합합니다.
const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
dispatch({ type: "ADD_TODO", payload: todoText });
setTodoText("");
}
};
const handleDeleteTodo = (index) => {
dispatch({ type: "DELETE_TODO", payload: index });
};
const handleEditTodo = (index, newTodo) => {
dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
setEditingIndex(-1);
setEditedTodo("");
};
지정된 담당자는 애플리케이션 내부 데이터 구조의 전체 프레임워크 내에서 특정 개인과 관련된 작업의 보강, 제거 및 수정을 관리할 책임이 있습니다.
미들웨어는 사용자가 할 일을 추가, 삭제, 편집하는 등 변경할 경우 스토어 리듀서에 적절한 업데이트가 전송되어 애플리케이션 상태를 정확하게 표현할 수 있도록 하는 역할을 담당합니다.
할 일 컴포넌트 렌더링
웹 페이지 레이아웃 내에 ‘할 일’ 컴포넌트를 필요에 따라 다른 컴포넌트 또는 스타일과 통합하여 웹사이트의 전체적인 모양과 느낌에 맞는 일관된 디자인을 만듭니다.
`src/app` 디렉토리에 있는 기존 `page.js` 파일을 기본 Next.js 템플릿 코드를 제거하고 대신 제공된 코드 스니펫을 통합하여 수정하세요.
import styles from './page.module.css'
import Todo from '../components/Todo'
export default function Home() {
return (
<main className={styles.main}>
<Todo />
</main>
)
}
훌륭합니다! React Context에 대한 새로운 지식과 Redux를 통한 구현을 통해 이제 To-do Next.js 앱 내에서 애플리케이션의 상태를 효과적으로 관리할 수 있게 되었습니다.
다른 상태 관리 기술과 함께 React 컨텍스트 API 사용하기
React 컨텍스트 API는 애플리케이션 내에서 상태를 관리하는 효과적인 수단을 제공하지만, Redux와 같은 대체 상태 관리 솔루션과 함께 사용할 때 유리하게 사용할 수 있습니다. 이러한 결합 전략을 채택함으로써 개발자는 중요한 기능을 수행하는 애플리케이션의 특정 측면에 가장 적합한 도구를 활용할 수 있습니다.
다양한 상태 관리 기법이 제공하는 이점을 활용하는 것은 체계적이고 지속 가능한 소프트웨어 시스템을 개발하는 데 필수적입니다.