useState re-render 최적화

const [data, setData] = React.useState(null);
const [categories, setCategories] = React.useState([]);
...

이런식으로, 개발할때 보면 usestate로 떡칠이 되어있는 코드를 보면서 이래도 되나 싶은적이 한두번이 아니다 나보다 경력자들이 그렇게 해놔서 그러려니 하긴했는데

내가 아는 state는 렌더링을 새로하는데 이러면 퍼포먼스에 안좋은거 아닐까 ?? 싶은 생각이 마구마구 들었음

객체화

그래서 내가 한번 고민해서 했던 방법은 여러개면 객체로 묶어버리는것이다.

예시

const [dataMap, setDataMap] = React.useState({
	data1: "data1",
	data2: "data2",
	...
});

이런식으로, 이러면 내가 지난글에도 적어놨다시피

useState는 참조값을 비교하여 변화여부를 판단함

그냥 값을 변경하는걸로는 렌더링이 새로 일어나지 않는다. 깊은복사를 해야 새로운 렌더링이 일어난다.

찾아보니까 이런방법도 소개되어있는걸로 봐서는 틀린생각은 아니었던거같다.

그렇다고 마구마구 한번에 묶는건 당연히 안되고 어느정도 연관성이 있어야 묶는식으로 알아서 잘 나눠놔야겠지?

SCU(shouldComponentUpdate)

찾아보다보니 이런함수도 있구나 shouldComponentUpdate()가 무슨기능을 하느냐

컴포넌트 업데이트방식을 재정의 합니다. 쉽게말해서

다시렌더링을 할지말지를 내가 지정할수있다

예시

shouldshouldComponentUpdate(nextProps, nextState) {  
    if (this.state.buzz !== nextState.buzz) {  
    	return true;  
    }  
	    return false;  
}  

여기서 false로 빠지면 re-render가 일어나지않는다.

필요하다면 이것도 사용하면 될꺼같다.

P.S

역시 나보다 똑똑한사람들이 미리 메소드형태로 만들어놨구나, 그래도 내생각도 결과적으로는 잘못작동하는 방법은 아니니 사용해도 괜찮을듯