useState로 상태 안전하게 다루기: 함수형 업데이트 가이드

React에서 useState를 더 안전하고 효율적으로 사용하는 방법을 알아보자. 특히 함수형 업데이트라는 기법을 통해 상태 관리를 더 똑똑하게 할 수 있다.왜 함수형 업데이트가 필요할까? React로 개발하다 보면 이런 경험이 있을 것이다:- 상태 업데이트가 예상대로 동작하지 않는다- 여러 번 상태를 변경했는데 한 번만 반영된다- 이전 상태값이 제대로 반영되지 않는다 이러한 문제들은 대부분 React의 상태 업데이트가 비동기적으로 동작하기 때문에 발생한다. 하지만 함수형 업데이트를 사용하면 이런 문제들을 깔끔하게 해결할 수 있다.함수형 업데이트란? 함수형 업데이트는 말 그대로 함수를 사용해서 상태를 업데이트하는 방식이다. 기존 상태를 기반으로 새로운 상태를 만들어내는 함수를 전달하는 것이다.일반적인 방..

• format_list_bulleted 개발
• · 2025. 2. 19.
• textsms

React 상태 관리(State Management) 방법과 장단점 비교

React는 컴포넌트 기반 라이브러리로, 상태(State)를 효과적으로 관리하는 것이 중요한 요소 중 하나입니다. 상태 관리는 UI의 동적인 변화를 반영하고, 데이터 흐름을 유지하는 데 필수적인 역할을 합니다. 하지만, 프로젝트의 규모와 복잡도에 따라 적절한 상태 관리 방법을 선택하는 것이 매우 중요합니다.이 글에서는 다양한 React 상태 관리 방법을 소개하고, 각 방법의 장단점을 비교해 보겠습니다.1. useState & useReducer (기본적인 상태 관리)📝 useStateuseState는 React의 기본적인 상태 관리 훅(Hook)으로, 로컬 컴포넌트 상태를 관리하는 데 적합합니다. ✔️ 장점간단하고 직관적인 API 제공불필요한 리렌더링을 최소화할 수 있음작은 규모의 상태 관리에 적합 ❌..

• format_list_bulleted 개발
• · 2025. 2. 18.
• textsms

가계부 만들기 2

현 오후 12시 36분. 지금까지 입력 값을 받아서 맞는 달에 뿌리기 + 빈 값으로 저장하려고 하면 alert 띄우기를 했다. 어제 인풋 입력 값을 가져오는 건 하고 티스토리에 안 썼는데 이것부터 정리하자면~ 먼저 form에 onSubmit을 준다. 그리고 함수를 만들어서 제출할 때 실행되도록 했다. const submitForm = (e) => { e.preventDefault(); const newItem = { date: dateValue, item: itemValue, amount: amountValue, description: descriptionValue, id: uuidv4(), };제일 먼저 e.preventDefault(); 를..

• format_list_bulleted 리액트
• · 2024. 5. 24.
• textsms

가계부 만들기 1

본격적으로 가계부 만들기 시작!... 근데 어렵다. 1. 설치yarn create vite my-react-app --template reactcd my-react-appyarnyarn dev  2. yarn add styled-components  app.jsx 상단에 추가 import React from "react";import styled from "styled-components";  3.yarn add react-router-dom  4. Pages 폴더 -> Home, Detail.jsx 파일shared 폴더 -> Router.jsx Router.jsximport React from 'react';const Router = () => { return Router;};export defaul..

• format_list_bulleted 리액트
• · 2024. 5. 23.
• textsms

리액트로 todo list 만들기 2

그 다음엔 먼저 TodoList로 분리하고, TodoList 내에서 중복되는 코드가 있어서Todo로 분리했다. 일단 다 나눠버려서 TodoList는 이미 나눠진 코드다. 허헛 const TodoList = ({ todos, onDelete, moveDone }) => { return ( Working🏃‍♀️ {todos.map((todo) => { if (todo.isDone === false) { return ( ); } })} 일단 todos, onDelete, moveDone을 가져와서차례대로 넣어준다. 그리고 working에서 map을..

• format_list_bulleted 리액트
• · 2024. 5. 16.
• textsms

리액트로 todo list 만들기 1

리액트로 투두리스트 만들기! 더보기더보기킹갓제네럴⭐️⭐️님 덕분애... 대충 짰읍니다. 먼저 App.jsx 하나에 적었는데 먼저 화면에 띄워줄 것들을 작성한다.  html로 치면 뼈대 작성. function App () { return ()}여기 안에 작성해주면 되는데return 윗부분에는 함수를,return 안에는 html 뼈대를 만든다. 나는 헤더를 분리했다.const Header = () => { return ( My Todo List React );};export default Header;이런 식으로!! 그 다음이 todo를 입력하는 폼을 만들어줬는데역시 분리했다.import React from 'react';function TodoForm({ title,..

• format_list_bulleted 리액트
• · 2024. 5. 14.
• textsms