2021.04.08
9-1. Create 구현 - immutable
이하 mode의 변경이나 onSubmit 이벤트 부여 등은 기존 HTML이나 JS와 크게 다르지 않다. RUD가 다 비슷비슷하다.
다만 여기서 핵심적인 개념이 'Immutable', 즉 '불변성'이다. React에서 이 개념은 원본에 변화를 주지 않는 것을 중점으로 다룬다. 예를 들어,
여기서 얼핏보면 a와 b는 같은 배열이라고 생각할 수 있다. 하지만 콘솔로 비교연산자를 통해 확인하면 엄연히 다른 배열이라는 것을 알 수 있다. 즉, 값만 같은 a와 b라는 두 배열이라는 뜻이다.
그래서 Array.from, Obeject.assign, concat 등 속성을 통해 원본을 복사해서 변화를 주지 않고 복제된 객체를 사용한다. 그 이유의 핵심은 바로 'shouldComponentUpdate'에 있다.
'shouldComponentUpdate'
React Component 구동의 핵심은 render 함수라는 것을 이미 배웠었다. 이 render 함수는 Component의 state나 props에 변화점이 생기면 다시 호출되면서 UI에 변화를 준다. 문제는 재호출되며 해당 render 함수 하위에 있는 모든 Component, 즉 자식 Component들의 모든 render 함수가 재실행 된다는 것이다. 이러다보면 호출 될 필요가 없는 Component의 render 함수도 호출된다.
당연히 이러한 일련의 동작은 비효율적이고, 효율성을 저하시킨다. 이를 막기 위해 사용하는 것이 바로 'shouldComponentUpdate'이다. 이 함수의 return이 false라면 React는 그 밑에 render 함수를 실행하지 않는다. 쓸데없는 rendering을 막을 수 있는 것이다.
shouldComponentUpdate의 매개변수는 newProps, newState로 약속이 되어 있다.
console.log(newProps, 'A'); console.log(this.props.data, 'B');
여기서 B는 기존 props의 값을 가져오고, newProps는 새로이 변경 된 값을 가져온다. 두 값의 비교를 통해 차이가 있다면 true를 리턴해 자신의 render 함수를 실행하고, 차이가 없다면 false로 render 함수를 실행하지 않을 수 있는 것이다.
이는 React 최적화의 핵심으로 강조하는 사항인 것 같다. 꼭 기억하고 신경쓸 수 있도록 하자.
