[학습 기록] Day61: Redux

2025.04.24 - [Study Notes/React] - [React] Redux - 상태관리 라이브러리 [React] Redux - 상태관리 라이브러리Part 1. 리덕스란 무엇인가?자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 너무 많은 상태를 관리하다보면 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 kenco.tistory.com 회고오늘은 리덕스라는 리액트의 상태관리 라이브러리를 학습했다.많은 상태관리 라이브러리 중 하나일뿐이라는데, 이 라이브러리 하나를 배우는 것조차 꽤나 러닝커브가 있었다.회사에 들어가게 되거나, 프로젝트를 하게 되면 꼭 이렇게 유명한 라이브러리만 쓴다는 보장이 없기에어떤 라이브러리를 접해도 바로 배우려는 의지와 금방금방 학습할 수 있도..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 4. 24.
• textsms

[React] Redux - 상태관리 라이브러리

Part 1. 리덕스란 무엇인가?자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 너무 많은 상태를 관리하다보면 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 된다!상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 만다. 게다가 프론트엔드 제품 개발에 있어서 새로 갖춰야할 요건들이 늘어나고 있는데,예를 들어 서버 렌더링, 라우트가 일어나기 전에 데이터 가져오기가 있다. 이러한 복잡함은 변화(mutation, 상태가 바뀌는 것)와 비동기(asyncronicity)와 같이 사람이 추론해내기 어려운 두 가지 개념을 섞어서 사용한다는 데서 온다. 이 둘은 나눠서 보면 훌륭하지만 함께 두면 엉망이 된다. 이러한 고민에서 리덕스가 탄생하게 되었다. Contex..

• format_list_bulleted Study Notes/React
• · 2025. 4. 24.
• textsms

[학습 기록] Day59: URLSearchParams, useSearchParams, 페이지네이션

URLSearchParams URL 이란?URL 객체는 웹 주소(URL)를 파싱하고 조작하기 위한 JavaScript의 내장 API이다.URL 객체를 사용하면 URL의 각 구성 요소(프토로콜, 호스트, 경로, 쿼리, 매개변수 등)에 쉽게 접근하고 수정할 수 있다.https://www.example.com:8080/path/to/page?name=value&search=test#section└─┬─┘ └─────┬─────┘ └─┬──┘└─────┬─────┘└───────┬─────────────┘└──┬──┘프로토콜 호스트 포트 경로 쿼리 매개변수 해시(프래그먼트) URLSearchParams란?URLSearchParams 객체는 URL의 쿼리 스트링을 쉽게..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 4. 23.
• textsms

[학습 기록] Day58: React.memo

React.memo [React] 최적화: useMemo, React.memo, useCallbackuseMemo와 연산 최적화 - 불필요한 연산 방지 useMemo란?"메모이제이션" 기법을 기반으로 불필요한 연산을 최적화하는 리액트 🤔useMemo를 사용하지 않을경우더보기import React, { useState } from "react";importkenco.tistory.com 1. useEffect와 useCallbackuseCallback은 처음 마운팅될때만 함수가 생성되게 하고 불필요한 리렌더링을 방지한다고 학습했다.💭그런데 useCallback도 의존성에 빈배열을 넣어서 똑같은 역할을 하지 않나..? 라는 질문이 생겼다.gpt피셜 전혀 다르다는데, 아무래도 두 개 다 실전에서 써본 경..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 4. 22.
• textsms

[React] 최적화: useMemo, React.memo, useCallback

useMemo와 연산 최적화 - 불필요한 연산 방지 useMemo란?"메모이제이션" 기법을 기반으로 불필요한 연산을 최적화하는 리액트 🤔useMemo를 사용하지 않을경우더보기import React, { useState } from "react";import "./List.css";import TodoItem from "./TodoItem";const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (searc..

• format_list_bulleted Study Notes/React
• · 2025. 4. 22.
• textsms

[React] useReducer로 투두리스트 업그레이드 하기

useReducer란? useReducer는 Redux 스타일의 상태 관리를 컴포넌트 내부에서 구현할 수 있게 해주는 훅 이며,컴포넌트 내부에 새로운 State를 생성하는 React Hook이다.모든 useState는 useReducer로 대체 가능하다. But! useState와 달리, 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다. useState를 사용하면...컴포넌트 내부에 상태 관리 코드를 작성해야 한다.useReducer를 사용하면...컴포넌트 외부에 상태 관리 코드를 분리할 수 있다.(좌) useState / (우) useReducer 사용 useReducer 코드로 살펴보기const [state, dispatch] = useReducer(reducer, initialStat..

• format_list_bulleted Study Notes/React
• · 2025. 4. 22.
• textsms