본문 바로가기

분류 전체보기268

(12).이정환_react.js강의_Context ● React_Context의 탄생 배경 :○ TodoList 프로젝트 만들 때, onDelete, onUpdate를 제작 부분에서 props는 부모 => 직속 자식 전달방식만 가능하기에 아래의 사진과 같이 props 전달로 함수들을 옮겼었다.만약, 규모가 큰 프로젝트라면, 중간다리가 시발 존나 많아짐 (Props Drilling)○ 이것에 대한 단점의 해결점 : Context : props의 보관소 + 쿠팡배송○ Context는 딱 1개만 있는 것이 아닌, 전달되는 징검다리 경로에 따라 개수가 정해져서 보관할 수 있다.● 1_ Context 생성하기 :○ 순서1_ import로 'react'에서 "createContext"메소드 불러오기○ 순서2_ 컴포넌트 밖에서 createContext()객체로 생성.. 2025. 1. 18.
(11).이정환_react.js강의_컴포넌트 중 불필요한 재렌더링방지 =>React.memo() , 불필요한 함수 재생성 => useCallback() 개발자 도구창을 열고, 한 item항목의 checkBox 클릭으 반복적으로 하면, 어떤 부분이 재랜더링 되고있는 지를 알 수 있다.아래의 사진은 checkBox를 계속 누를 시, 모든 컴포넌트에서 재랜더링이 되고 있다는 것을 알 수 있다. // 불필요한 재랜더링이 발생 중이다.○ 목표 : 특정 item의 isDone을 checkBox로 반복적으로 변경 시,- Header가 재랜더링 되지 않도록 막기- 바뀌는 특정 item만 재랜더링되고, 나머지 item들은 재랜더링이 되지 않도록 셋팅해보기1_ Header 컴포넌트의 재랜더링 막기 :- 순서1_ import로 memo 메소드 라이브러리 등록- 순서2_ export default 에 컴포넌트를 memo(Header)로 변경- Header.jsimport ".. 2025. 1. 18.
TodoList_복습1 ● List.js : 검색창에 입력값에 따라 바로 렌더링import { useState } from "react";import "./List.css";import TodoItem from "./TodoItem";function List({ items, onUpdateItem, onDeleteItem }) { const [search, setSearch] = useState(""); const onChangeSearch = (event) => { setSearch(event.target.value); }; const onKeyDownSearch = (event) => { if (event.keyCode === 13) { // 검색어가 없으면 필터링하지 않고 반환 if (.. 2025. 1. 18.
(11).이정환_react.js강의_최적화의 종류와 React 내부의 최적화 ● React에서 최적화의 종류 :○ 웹서비스에 대한 최적화 종류 :○ React 내부의 최적화 종류 :● React에서 최적화의 종류1 "연산 방지"에 대한 최적화 React Hook : useMemo연산 방지에 대한 상황 :예를 들어, todoList프로젝트에서, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 uncheck 된 item 개수 출력되도록 할떄, 이것을 렌더링 할때마다, item들을 집계하면서, 계속 계산하면, 좆같으므로, 랜더링 하면서 , 업데이트된 개수들만 계산하는 기법을 useMemo를 말한다.1_ 실습 준비 :일단 List 컴포넌트 자리에, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 unche.. 2025. 1. 17.

티스토리툴바