미라클 메모리

목차

컴포넌트 구조

ControlMenu에서 select 태그의 값이 변경되면 state끌어 올리기에 의해서 상태값이 변경된다.

const [sortType, setSortType] = useState("latest");
const [filter, setFilter] = useState("all");
...
<ControlMenu
	value={sortType}
	onChange={setSortType}
	optionList={sortOptionList}
/>
	<ControlMenu
	value={filter}
	onChange={setFilter}
	optionList={filterOptionList}
/>

이때 상태값이 변경되면서 DairyList 컴포넌트 전체가 리-렌더링 되는 상황이 발생하면서 Item요소들 또한 리-렌더링의 대상이 되어버린다. 이를 방지하기 위해서 아래와 같이 코드를 입력하자

export default React.memo(DiaryItem);