리액트4 Context API 어떤 상태(state)를 전체적으로 공유하기 위함이다. 3가지만 기억하면 된다.1.createContext 만들기2.Provider(껍데기) 만들기3.내가 쓸 곳에 씌워주기. 1.createContext 만들기const UserContext = createContext(초기값) 2.껍데기 만들기export default function AtuhProvider({children} : {children : Type}) {안에서 state와 state함수 return ( {children} )} 3.내가 쓸 곳에 놓기.//app.tsx 심화적으로 보겠다.import { createContext, useState } from "react";import getAuthDataFromLocalSto.. 2024. 7. 26. 메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다. 사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 2024. 7. 26. 리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것 불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다. 지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. 2024. 7. 25. 리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음. 작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영 Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex.. 2024. 7. 22. 이전 1 다음
