1. 최적화와 메모이제이션최적화: 웹서비스의 성능을 개선하는 기술 + 렌더링의 성능을 높이는 방법-> 최적화가 잘된 웹서비스는 사용자를 불필요하게 기다리지 않게 하여 서비스의 긍정적인 경험을 만든다.최적화 방법으로는 코드, 폰트, 이미지 파일의 크기를 줄이는 등의 여러 방법이 있다. 리액트는 '메모이제이션'으로 연산 최적화 한다.메모이제이션: 특정 입력에 대한 결과를 계산해 메모리 어딘가에 저장했다가, 동일한 요청이 들어오면 저장한 결괏값을 제공해 빠르게 응답하는 기술이다.  (불필요한 연산을 줄여 실행속도가 빨라진다: 동적 계획법) ex) 식당에서 메뉴를 외웠다가 누가 물어보면 답한다.    2. 함수의 불필요한 재호출 방지하기1. 할 일 분석 기능 추가하기// src/component/TodoList..

24-25/React.js 1 2025. 1. 10. 10:01

7장. useReducer와 상태 관리 이 장에서는 상태 변화의 개념과 useReducer에 대해 알아보고, useRuducer를 이용하여 이전에 만들었던 [할 일 관리] 앱을 업그레이드하여 본다. 1. useReducer 이해하기 리액트 훅 useReducer를 이용하여 상태 변화 코드를 분리한다. 상태 변화 코드 분리라는 개념을 이해하기 전에 useReducer에 대해 알아보자. [ 실습 준비하기 ] 이전 실습에서 작성한 [할 일 관리] 앱을 열고 component 폴더에 TestComp.js 이름으로 임시 컴포넌트를 만든다.import { useState } from "react";function TestComp() { const [count, setCount] = useState(0);..

24-25/React.js 2 2025. 1. 10. 10:00

1. useReducer 이해하기 이전에 작성한 [할 일 관리] 앱을 열고 component 폴더에 TestComp.js라는 임시 컴포넌트를 하나 만든다. TestComp.js 작성 import { useState } from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; TestComp를 App 컴포넌트의 자식으로 배치해 페이지에 렌더링 한..

23-24/React.js 2 2023. 12. 29. 10:00

7장 useReducer와 상태 관리 useReducer 이해하기 상태 변화 코드를 쉽게 분리할 수 있다. 실습 준비하기 1. component > TestComp.js 생성 import {useState} from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); }; const onDecrease = () => { setCount(count-1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; + 버튼 : onIncrease 함수 호출 → count 값 +1 - 버튼 : onDec..

23-24/React.js 3 2023. 12. 29. 10:00

useReducer 이해하기 useReducer는 useState와 더불어 리액트 컴포넌트에서 State를 관리하는 리액트 훅입니다. useReducer는 State 관리를 컴포넌트 내부가 아닌 외부에서 할 수 있게 만듭니다. useState와 달리 useReducer를 이용하면 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있습니다. 📌 상태 변화 코드 State값을 변경하는 코드 상태 변화 코드를 분리한다는 말은 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 뜻입니다. 그러나 useState를 이용해 State를 만들면 상태 변화 코드 분리 불가합니다. 반드시 컴포넌트 안에 작성해주어야 합니다. 하지만 useReducer를 사용하면 상태 변화 코드를 컴포넌트 밖으로 분리할 수 있습니다...

23-24/React.js 1 2023. 12. 29. 10:00