React | setState, 성능개선

React

목차

1. setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요? 🌊
   일괄적인 업데이트를 위해 재조정을 연기하는 것이 이득
2. 리액트의 성능개선 방법에 대해서 설명해주세요
   1. state 선언 위치 파악
   2. React.memo()
   3. key 값으로 index를 사용하지 않기
   4. useMemo
   5.useCallback

1. setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요?

1. setState 동작 방식

   • setState는 비동기식으로 동작
   • state 값이 변할때마다 컴포넌트가 렌더링이 되기 때문에 효율성을 위해서 setState가 여러번 입력될 경우 연속적으로 동작하여 state값을 변경하는 것이 아니라 여러번 입력된 setState를 모았다가 동작, 최종 변경된 state 값이 적용되어 한번만 렌더링됨
   • setState()를 연속적으로 호출할 경우 Batch 처리가 됨(state 값이 바로 변경되는 것이 아니라 16ms 단위로 변경된 상태 값을 모아서 batch update를 진행함)
     
     

2. setState가 비동기 동작을 취했을 때 얻을 수 있는 이점

   • 일괄적인 업데이트를 위해 재조정을 연기하는 것이 이득
   • 내부적으로 전달되는 props와 state의 일관성을 유지하기 위해서는 setState가 비동기적으로 동작해야함
   • 비동기 렌더링을 위해 setState는 비동기적으로 동작해야함
     
     

2. 리액트의 성능개선 방법에 대해서 설명해주세요 // 구글링을 바탕으로 나온 내용 (직접 개선 후 사용한 내용으로 교체 예정)

* 불필요한 렌더링이 발생하면 성능저하, 손실이 발생하게 되기때문에 렌더링을 최적화하여 손실을 줄이는 방법이 필요하다.

1. state 선언 위치 파악 : state를 사용할 때 최상단 컴포넌트 위치를 파악하여 선언을 해줘야 원치않은 리렌더링에서 벗어날 수 있음
2. React.memo() : 컴포넌트를 렌더링하여 그 결과를 메모이징 하는데 다음 렌더링이 일어날 때 props가 같으면 메모이징된 내용을 재사용하여 불필요한 리렌더링을 피할 수 있음
3. key 값으로 index를 사용하지 않기 : map을 돌릴 때 고유 key값을 부여하도록 하는데 index로 key값을 설정한다면 중간에 새로운 값이 삽입된 경우 리마운트가 일어나며 데이터가 매칭이 되지 않는 오류도 발생할 수 있음
4. useMemo : 종속 변수들이 변하지 않으면 함수를 굳이 다시 호출하지 않고 이전에 반환한 참조값을 재사용함 (함수 호출 시간 세이브, 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지할 수 있음)
5. useCallback : 컴포넌트 내부 로직에서 쓰이는 함수의 재렌더링을 막음 (함수와 종속성 배열을 매개변수로 전달받으면 메모이제이션된 콜백을 반환) ← 무분별한 사용은 메모리가 낭비될 수 있음

---

출처

setState 동작원리
batch
setState와 비동기
리액트의 성능개선 방법