[REACT] 렌더링과 State 관리

DaramGee·2025년 5월 22일

React State

TIL

목록 보기

2/17

REACT

렌더링

재렌더링 조건

State 변경
Props 변경
재렌더링된 컴포넌트 아래의 모든 컴포넌트(중요)
- 모든 하위 컴포넌트가 불필요하게 렌더링될 수 있기 때문에 최적화 필요

렌더링 최적화

1) React.memo 컴포넌트 메모이제이션

이전 처리결과를 저장해둠 -> 불필요한 처리 줄임
Props에 변경이 있을 때만 재렌더링

const Componenet = memo(()=>{})

2) React.useCallback 함수 메모이제이션

첫번째 인수에 함수, 두번째 인수에 의존 배열
자녀에 porp을 전달하는 함수에 적극적으로 사용!

const onClickReset = useCallback(() => {  
  setNum(0);  
}, []);

3) React.useMemo 변수 메모이제이션

첫번째 인수에 함수, 두번째 인수에 의존 배열
변수 정의 로직이 복잡하거나 많은 루프가 돌 때 사용

const sum = useMemo(()=>{
 return 복잡한 로직;
},[])

State 관리

필요한 이유

여러 계층에 props 전달해야할 때... n번의 무의미한 전달은 비효율
이를 글로벌한 값인 State로 관리함으로써 불필요한 전달 최소화
여러 위치에서 참조하는 공통값일 때 사용(예 : 사용자정보)

방법

1. Context에서 State 관리

순서

1. createContext로 Context의 프로바이더 작성
2. Context의 프로바이더로 글로벌 State 영역을 컴포넌트로 감싸기
3. State를 참조할 곳에서 useContext 사용하기

1) createContext로 Context의 프로바이더 작성

import { createContext, useState } from "react";  
  
export const AdminFlagContext = createContext({});  
  
export const AdminFlagProvider = (props) => {  
  const { children } = props;  
  const [isAdmin, setIsAdmin] = useState(false);  
  
  return (  
    <AdminFlagContext.Provider value={{ isAdmin, setIsAdmin }}>  
      {children}  
    </AdminFlagContext.Provider>  
  );  
};

2) Context의 프로바이더로 글로벌 State 영역을 컴포넌트로 감싸기

import ReactDOM from "react-dom";  
import { App } from "./App";  
import { AdminFlagProvider } from "./components/providers/AdminFlagProvider";  
  
ReactDOM.render(  
  <AdminFlagProvider>  
    <App />  
  </AdminFlagProvider>,  
  document.getElementById("root")  
);

1) State를 참조할 곳에서 useContext 사용하기

import { useContext } from "react";  
import { AdminFlagContext } from "./providers/AdminFlagProvider";  
  
const style = {  
  width: "100px",  
  padding: "6px",  
  borderRadius: "8px",  
};  
  
export const EditButton = () => {  
  // Context 안의 Admin을 얻는다  
  const { isAdmin } = useContext(AdminFlagContext);  
  
  return (  
    <button style={style} disabled={!isAdmin}>  
      수정  
    </button>  
  );  
};