팀프로젝트_기록일지/React_이정환_context2 (13).이정환_react.js강의_Context분리로 최적화 문제 해결 ★useMemo 복습하기 :★ 분리법 + 구조파악●TododispatchContext(함수 보관용 Context) , TodoStateContext(useState 변수 보관용 Context)-순서1_ App 컴포넌트 밖에 Context 2개 초기화import {createContext} from 'react';const TodoStateContext = createContext();const TodoDisPatchContext = createContext();function App(){}-순서2_ DisPatch의 함수, 핸들러를 useMemo 등록하기import {createContext} from 'react';const TodoStateContext = createContext();const To.. 2025. 1. 18. (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. 이전 1 다음
