React에서 쉽게 넘어갈 수 있는 최적화 방법 중의 하나를 작성해보려고 한다. 아주 간단한 차이가 큰 변화를 만드는 것 중 하나이다. 다음 코드를 보자.
const Inner = () => {
const expensiveCalc = () => {
console.log("do expensive calculation...");
};
const value = expensiveCalc();
return <div>{value}</div>;
};
const Wrapper = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(prev => prev + 1)}>+</button>
<Inner />
</div>
);
};
const App = () => {
return <Wrapper />;
};별로 이상한게 없어보인다. 실행시켜보면, 버튼을 누를 때마다 state의 업데이트가 발생하므로 하위 컴포넌트들이 리랜더링 되고, 그에 따라 expensiveCalc가 실행되는 것을 볼 수 있다. 이를 막는 방법으로 React.memo를 사용하는 방법을 떠올릴 수 있다. 하지만, 더 간단한 방법이 있다.
const Inner = () => {
const expensiveCalc = () => {
console.log("do expensive calculation...");
};
const value = expensiveCalc();
return <div>{value}</div>;
};
const Wrapper = ({ children }) => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(prev => prev + 1)}>+</button>
{children}
</div>
);
};
const App = () => {
return (
<Wrapper>
<Inner />
</Wrapper>
);
};코드를 이렇게 짜면 버튼을 눌러도 expensiveCalc가 실행되지 않는다. 즉, Inner가 리랜더링 되지 않는다. props는 불변하고 children도 props 중 하나이다. 그렇기 때문에 당연한 결과이다. React.createElement를 실행한 결과를 props로 주기 때문에 리랜더링은 일어나지 않는다.
애초에 Inner 컴포넌트가 Wrapper의 동작과 아무 관계가 없기 때문에 이렇게 짜는게 바람직하지만 코드를 짜다보면 그러한 로직이 한 번에 안보이는 경우가 많다! 이런 것에 주의하면 memo나 shouldComponentUpdate 같은 함수 없이 조금 더 최적화된 코드를 짤 수 있다.