TIL) React - props, state, 재렌더링 조건

🌼props

⭐props: 특성

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있다.
부모 컴포넌트로부터 전달받는 데이터이고 해당 컴포넌트의 특성이므로 자식 컴포넌트에서는 변경이 불가능하다.

🌼state

⭐state: 상태

리액트 컴포넌트의 현재 상태를 의미하고, 변경이 가능하다.
한 컴포넌트 안에서 유동적인 데이터를 다룰 때, 컴포넌트 내에서 데이터가 변경되고 그 내용이 화면에 반영되어야 할 때 사용한다.

🌼렌더링

📂렌더링
컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지 컴포넌트에게 작업을 요청하는 것.

⭐재렌더링 조건

1. state(상태)의 변경

• 컴포넌트 상태가 setState 함수를 통해 변경되면 해당 컴포넌트가 재렌더링된다.

2. props(속성)의 변경

• 부모 컴포넌트가 자식 컴포넌트에게 전달하는 속성(props)이 변경되면 자식 컴포넌트가 재렌더링된다.

3. 부모 컴포넌트의 재렌더링

• 새로운 props가 들어오지 않더라도 부모 컴포넌트가 재렌더링 되면 자식 컴포넌트도 같이 재렌더링 된다.

4. 중앙 상태값(Context value 혹은 Redux store) 변경

• Redux store 변경 시 자동으로 재렌더링 되는 이유:
  리덕스 스토어가 <Provider store={store}>로 컴포넌트를 감쌌을 때, 스토어 상태가 변경될 때마다 이를 참조하는 컴포넌트들이 재렌더링 될 수 있도록 react-redux 라이브러리가 자동적으로 컴포넌트들의 렌더 함수들을 돕기 때문이다.

5. 컴포넌트의 강제 재렌더링

• forceUpdate 메서드를 사용해 컴포넌트를 강제로 재렌더링 할 수 있다.

  📂forceUpdate
  props나 state가 아닌 다른 값이 변경될 때 재렌더링을 하려할 때 사용하는 메서드.

this.forceUpdate();

⭐렌더링 최적화

useState, useCallback, useMemo Hooks 사용하기

훅을 사용하여 컴포넌트의 상태, 이벤트 핸들러, 계산 결과 등을 메모이제이션하고 관리해서 불필요한 재렌더링을 방지할 수 있다.

📂Memoization
메모이제이션은 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법.
중복 연산을 피할 수 있기 때문에 애플리케이션 성능을 최적화 할 수 있다.

• useState: 함수 컴포넌트에서 State를 사용하기 위한 리액트 훅.

• useCallback: 메모이제이션된 함수를 반환하는 함수.
  useCallback(fn, [deps])
  useMemo는 함수 props의 불필요한 재렌더링을 막아줄 수 없다.
  부모 컴포넌트가 재렌더링할 때마다 함수도 새로 생성되기 때문에, 자식 컴포넌트도 새로운 props로 인식하고 재렌더링하게 된다. 이를 막기 위해 useCallback을 사용하여 함수의 값이 변경될 때만 재렌더링 되도록 한다.

• useMemo: 메모이제이션된 값을 반환하는 함수.
  useMemo(() => fn, [deps])
  deps로 지정된 값이 변하면 fn 함수를 실행하고 그 함수의 반환값을 반환해준다.

  📂deps
  dependency의 약어. 의존성을 뜻하며 useMemo가 deps에 의존하고 있음을 말한다.

재렌더링이 발생할 경우, 특정 변수가 변할 때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게 된다.