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

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

안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team KKY의 LLVM에 대한 이야기인데요, 새로운 언어를 만들고 기존 언어를 강화하는 LLVM 에 대해 알아봅시다!

Corner 코너 2024. 4. 12. 13:36

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

지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:00