[React] useReducer와 ReactContext 개념 잡기

요새 매번 컴퓨터로 필기하며 공부를 했었는데요...저는 아무래도 아날로그가 잘 맞는 것 같습니다.노트에 직접 한자한자 적으면서 할때 가장 이해가 잘 되고, 집중도 잘 되는 거 같아요. 그래서 이번엔 한입리액트 몇 안남은 강의를 들으며 노트 필기로 내용정리를 했습니다.코딩이란게 종이에 적으면서 공부하기엔 너무 어려운 부분이라(컴퓨터 언어잖아요...) 굉장히 지저분한 필기가 되었지만 ㅋㅋㅋ어쨌든 저만 알아볼 수 있으면 되니까요^__^... 이미 이전에 useReducer와 Context를 각각 두번씩 블로그에 타자 치며 열심히 정리도 하고 강의도 들었었는데...와오늘 직접 종이에 적으면서 하니 이제야 구조가 제대로 이해가 되었고, GPT없이도 직접 코드를 칠 수 있겠더라고요 ㅋㅋㅋ;; 다소 비효율적이지만 다..

• format_list_bulleted Study Notes/React
• · 2025. 10. 15.
• textsms

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

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

• format_list_bulleted Study Notes/React
• · 2025. 4. 24.
• 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

[React] 투두리스트 만들어보기

UI 구현하기시작하기1. eslint설정 : 아래 문장을 추가해준다.'no-unused-vars': "off",'react/prop-types': "off", 2. 프로젝트 기본 레이아웃 구성:(App.jsx)import "./App.css";import Header from "./components/Header";import Editor from "./components/Editor";import List from "./components/List";function App() { return ( );}export default App; (App.css).App { display: flex; flex-direction: column; gap: 10p..

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

📌Vite로 리액트 앱 배포시 404에러와 함께 빈 화면만 뜨는 문제 해결

로컬에서는 잘만 열리는 사이트가 배포했더니 빈화면만 나왔다....!분명 저번 미니 프로젝트때도 똑같이 Vite로 리액트 앱을 배포했으나 문제없던 것 같은데(아닌가?ㅎㅎ;;), 무슨 차이가 있는지를 정확히 모르겠다. 달랐던 점은 정상적으로 됐던 때:1. 최상위 폴더 아래 동일한 이름의 새로운 폴더 안에서부터 npm create vite를 시작했다.2. 원격 저장소를 먼저 생성한 후 첫 커밋은 직접 파일을 업로드하고 중간부터 github desktop에 올려서 빌드했다. 에러가 뜬 이번의 경우:1. 최상위 폴더 바로 아래부터 npm create vite를 통해 앱 생성1. 원격 저장소를 visual studio에서 그냥 바로 생성 Vite로 만든 리액트 앱을 GitHub Pages에 배포했을 때 404 에러..

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