React.memo
사용배경
현재 게시판 컴포넌트 구조는 다음과 같다.
즉 BoardMain컴포넌트를 렌더링하게 되면 하위 컴포넌트들도 렌더링하게 된다. BoardMain 컴포넌트에 useState를 사용하여 하위 컴포넌트의 변수를 관리했다.
여기서 발생하는 문제점은
BoardConditionForm의 변수를 변경하면 BoardConditionForm만 렌더링 되어야 하는데 전체가 렌더링 되어야 한다는 문제가 생겼다. 다른 부분도 마찬가지였다. 부모에서 모든 State를 관리했기 떄문에 생기는 문제였다.
React.memo란
컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing) 하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다.
즉, React는 컴포넌트를 재렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다.
[React] React.memo란?
=> 아!!! 하위 컴포넌트에 전달한 props가 바뀔 때마다 렌더링하게 하면 되겠구나
React.memo적용
1. BoardConditionForm 컴포넌트
위에 이미지를 보게 되면 props값으로 변수가 아닌 함수를 전달하였다. 그래서 부모 컴포넌트가 렌더링이 되어도 함수의 값은 변하지 않기 때문에 BoardConditionForm 컴포넌트는 바뀌지 않는다. BoardConditionForm 자체적으로 useState함수를 사용하여 렌더링되게 하였고 props로 전달받은 setState함수를 통해 부모 State값을 update시켜주었다.
2. BoardLimit 컴포넌트
BoardLimit 컴포넌트도 마찬가지로 props의 값으로 setState함수를 전달해준다. 그래서 부모가 렌더링 되어도 React.memo때문에 props값이 변하지 않으므로 렌더링 되지 않는다.
3. BoardTable, BoardPage 컴포넌트
BoardTable, BoardPage같은 경우 props값으로 변수들이 넘어온다. 즉 해당 변수가 변경 될 때마다 렌더링 되게 하였다.
