Interview_practice_14.md

React 렌더링 최적화 방법

컴포넌트의 리렌더링 조건 ✅

• 부모에서 전달받은 props가 변경될 때
• 부모 컴포넌트가 리렌더링 될 때
• 자신의 state가 변경될 때

useMemo

React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됨

• if) 컴포넌트 내에 어떤 함수가 값을 리턴하는데 많은 시간이 소요된다면?

  → 컴포넌트가 리렌더링 될 때마다 함수가 호출되면서 많은 시간을 소요하게될 것

  → 그 함수가 반환하는 값을 하위 컴포넌트가 사용한다면

  → 그 하위 컴포넌트는 매 함수호출마다 새 값을 받아 리렌더링할 것

useMemo 구조

useMemo(() => func, [input_dependency])

• func: 캐시하고 싶은 함수
• input_dependency
  • useMomo가 캐시할 func에 대한 입력의 배열
  • 해당 값들이 변경되면 func이 호출됨

useMemo 예제

const average = useMemo(() => {
	console.log("평균");
	return users.reduce((acc, cur) => {
		return acc + cur.score / users.length;
	}, 0);
}, [users])

→ 적용 시 input_dependency가 있는 데이터가 변할 때만 평균을 구하는 연산을 수행

→ input_dependency엔 users state를 넣어줌

⇒ useMemo는 종속 변수들이 변하지 않으면 굳이 다시 호출하지 않고 이전에 반환한 참조값 재사용

⇒ 함수 호출 시간도 세이브, 하위 컴포넌트의 리렌더링도 방지

useCallback

useMemo가 리턴되는 값을 memoize 시켜주었는데.. useCallback은 비슷하게 함수 선언을 memoize 하는데 사용됨

• if) 상위 컴포넌트에서 하위 컴포넌트로 함수를 props로 넘겨줄 때..

  → 상위 컴포넌트가 리렌더링 될 때마다 상위 컴포넌트 안에 선언된 함수 새로 생성

  → 그때마다 새 참조 함수를 하위 컴포넌트로 넘겨줌

  → 하위 컴포넌트도 props가 달라졌으므로 또다시 렌더링하게 됨

• 종속 변수들이 변하지 않는 이상 굳이 함수 재생성 x

• 이전에 있던 참조 변수를 그대로 하위 컴포넌트에 props로 전달

• 하위 컴포넌트도 props가 변경되지 않았다고 인지해 리렌더링 방지

그 외

1. 자식 컴포넌트의 props로 객체를 넘겨줄 경우 변형하지 말고 넘겨주기

2. 컴포넌트를 매핑할 땐 key 값으로 index 사용하지 않기

   어떤 배열 중간에 어떤 요소가 삽입될 때 그 중간 이후에 위치한 요소들은 전부 index가 변경되기 때문

3. input에 onChange 최적화

map함수에 key 값 넣어야하는 이유

💡 React가 **각 요소를 고유하게 식별**할 수 있도록 하기 위해

• 컴포넌트 상태 유지
• 일관된 렌더링

React 컴포넌트가 리렌더링되는 조건

(state, props 말고 다른거라고 적혀있긴 한데 다 정리)

• 컴포넌트의 state가 변경되었을 때
• 컴포넌트가 상속받은 props가 변경되었을 때
• 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링

State, Props 차이점

State

컴포넌트의 상태

• 상태에 따라 변하는 것
• 직접 변경 가능
• state가 변경되면 컴포넌트를 다시 렌더링 해야 함
• 외부엔 비공개, 컴포넌트 스스로가 관리 해야 하는 것

Props

properties(속성)의 줄임말

• 읽기 전용
• state와의 간단한 차이는 변할 수 없는 것
• 부모 요소에서 설정하는 것
• 초기값과 자료형의 유효성 검사가 가능

결론

💡 **props와 state는 일반 JS의 객체**

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있음

한 가지 중요한 방식에서 차이가 있다면 props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리