jin's Blog

import { configureStore, createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({ name: "counter", initialState: { counter: 0 }, showCounter: true, reducers: { increment(state) { state.counter = state.counter + 1; }, decrement(state) { state.counter = state.counter - 1; }, increase(state, action) { state.counter = state.counter + action.payload; ..

Redux가 굴러가는 원리를 알아보기 위해 몇가지 코드를 작성했다.// import { legacy_createStore } from "redux";const redux = require("redux");//항상 2개의 파라미터를 받아야한다.const counterReducer = (state = { counter: 0 }, action) => { if (action.type === "increment") { return { counter: state.counter + 1, }; } if (action.type === "decrement") { return { counter: state.counter - 1, }; } return state;};const ..

Redux가 필요한 이유에 대해 알아보자.React로 프로젝트를 개발하다 보면, 점점 복잡해지는 상태(state) 관리에 직면하게 된다. 단순한 컴포넌트 수준의 상태 관리로는 충분했던 초기 단계와 달리, 여러 컴포넌트 간의 상태 공유가 필요해질 때 상태 관리의 복잡성은 급격히 증가한다. 이때 Redux는 강력한 도구로 등장한다. 이번 글에서는 Redux가 왜 필요한지, 그리고 어떤 상황에서 유용하게 사용할 수 있는지 알아보자.상태 관리의 복잡성 문제React에서 컴포넌트 간 데이터를 공유하려면 일반적으로 props를 사용한다. 하지만 다음과 같은 문제가 발생할 수 있다.상태가 여러 컴포넌트를 거쳐 전달된다.데이터를 자식 컴포넌트로 전달하기 위해 중간 컴포넌트들이 props를 단순히 전달하는 경우가 생긴다..

마무리 하는 과정에서 다양한 에러를 마주했다.많은 시간을 썼다. 백엔드는 건드리지도 않았는데 아래의 코드를 진행하면 백엔드 서버가 꺼지고에러가 발생했다. 아무래도 프론트에서 내가 뭔가 실수를 해서 발생한 오류 같은데데이터는 올바르게 전송되고 백엔드에서도 올바르게 받아지길래 에러를 살짝 조정했다. 아무래도 백엔드에서 파일을 읽고 쓰는 곳에서 문제가 있었던 듯 하다.아래는 수정된 백엔드 코드이다.app.post("/orders", async (req, res) => { try { const orderData = req.body.order; if (!orderData || !orderData.items || orderData.items.length === 0) { return res.st..

API, 이 부분이 복잡하고 헷갈리는 부분이다. 상당히 많은 파라미터의 데이터 교환이 이루어지고useState부터 useCallback, useEffect까지 거의 대부분의 기능이 나오는 거 같다.그 말은 이 부분에 대한 자세한 이해가 있어야 한다는 말 같다. 일단 백엔드와의 api교환이 중요하고 웹프로그래밍의 끝은 api이기 때문에 집중해 보자.사실 어려워진 이유도 코드를 중복해서 쓰지 않고 간결하고 유용하게 쓰기 위해서이다.api를 주고받을 때마다 직접 코드를 하나하나 써서 주고받을 수 있지만 hook을 통해서일괄 관리 할 수 있기 때문에 해당 방법을 잘 살펴봐야 한다.1. SentHttpRequest네이밍은 다르게 해도 상관없지만 대부분의 httpRequest의 형태는 비슷하다, Endpoint의 ..

간단한 웹 프로젝트, 백엔드로 부터 데이터를 받아와서 아이템 리스트를프론트에 뿌리고 유저가 선택한 아이템을 카트에 담았다가구매를 누르면 백엔드에서 해당 목록을 받을 수 있는 프로젝트 중헷갈려서 기록해놔야 할 것들을 정리해보자. 1. createContext / useContext 웹 빌드를 하다보면 state를 공유해서 써야할때가 많다. 예를들면 유저가 버튼을 통해서 장바구니에 담았을때장바구니 속 선택된 Item들이 공유가 되어야한다. 또는 모달과 같은 컴포넌트에 유저가 선택한 목록이 공유가 될 때 등, 이런 경우 전체 컴포넌트를 한번에 관리할 수 있도록 createContext를 통해서 만들고 useContext를 이용해서 사용할 수 있다. 그래서 보통 store라는 폴더를 통해 관리하고, create..

React useEffect에서 else 없이 클린업 처리하기useEffect를 사용할 때, 상태에 따라 작업을 처리하면서 **클린업(cleanup)**을 수행하는 것은 매우 중요하다. 특히, 아래 코드처럼 else를 사용하지 않고 클린업을 처리하는 방식은 React에서 권장되는 패턴이다.useEffect(() => { const modal = dialog.current; if (open) { modal.showModal(); // 상태가 true일 때 다이얼로그 열기 } return () => modal.close(); // 상태 변경 또는 언마운트 시 다이얼로그 닫기}, [open]);왜 else를 사용하지 않을까?React의 클린업 메커니즘과 호환useEffect는 상태 변경이나 컴포넌..

React의 useContext로 상태를 공유하는 효율적인 방법: Cart 예제React 개발을 하다 보면 컴포넌트 간에 데이터를 공유해야 하는 상황이 자주 발생한다. 특히, 쇼핑 카트와 같은 기능에서는 여러 컴포넌트에서 동일한 상태(예: 장바구니 아이템 목록, 총 금액)를 참조하거나 수정해야 할 때가 많다. 이런 상황에서 **useContext**는 간단하고 효율적인 해결책을 제공한다.1. useContext란 무엇인가?useContext는 React의 Context API를 활용하여 전역 상태를 쉽게 사용할 수 있도록 도와주는 Hook이다.주요 특징부모 컴포넌트에서 데이터를 자식 컴포넌트로 전달할 때 Props Drilling을 방지한다.전역 상태를 관리하는 Context를 생성하고, 하위 컴포넌트에..

유효성 검사의 방법에는 여러가지가 있다.대표적으로 키보드 입력시 바로 유효성 검사해주거나, Blur 상태시(인풋칸에서 나갔을때) 유효성을 검사해주거나Form 제출 시 유효성 검사를 해주는 방법 등등 나는 Form제출 시 유효성 검사해주는 방법을 선호하는데 앞의 두개의 단점은 유저가 아무것도 입력하지 않은 상태에서버튼 광클같은 거 하면 벨리데이션으로 인한 에러가 유저에게 뜨긴 뜨는데 실제 콘솔 확인해보면 빈 데이터 상태로전송이 된다. 그러므로 많은사람들이 주로 이용하는 Form 제출의 예시를 써본다.const [formIsValid, setFormIsValid] = useState(false); function handleSubmit(event) { event.preventDefault(); ..

React에서 Form 데이터를 다루는 방법: Login 예제와 다양한 방식Form 데이터를 가져와서 처리하는 작업은 React 개발에서 매우 자주 등장하는 패턴 중 하나이다. 대표적으로 로그인(Login) 폼의 경우 이메일과 비밀번호를 입력받아 데이터를 서버로 전송해야 한다. 이 글에서는 State 관리와 FormData API를 활용한 Form 데이터 처리 방법을 소개한다.1. State를 활용한 Form 데이터 처리가장 기본적인 방식은 State를 활용하여 Form 데이터를 관리하는 것이다. State를 사용하면 React의 양방향 바인딩을 통해 Input 값과 상태를 쉽게 동기화할 수 있다.코드 예시import { useState } from "react";export default functio..