미라클 메모리

목차

ViewContainer 최적화하기

• 전체코드

ViewContainer 구조 파악하기

현재 내가 작성한 ViewContainer의 구조는 아래와 같다.

ViewContainer에서 MemoListItem과 컴포넌트를 자식으로 갖고, MemoListItem에는 Wrapper 라는 box와 memoItemBox를 가지고 있다. 하지만 나는 Wrapper태그를 아직 organism요소의 Box로 만들지 않았다. box로 분리하여 구조를 확실하게 분리해줘야한다.

굳이 구조를 분리해야하는 이유는 무엇이 있을까?

그 이유는 다음과 같다 ViewContainer 컴포넌트에 CommonHeader 버튼을 누를 경우에 해당 컴포넌트에 있는 상태값이 렌더링 되면서 CommonHeader 컴포넌트 뿐만 아니라 MemoListItem들도 다시 리 렌더링 된다.

  const [data, setData] = useState([]);
  const [curDate, setCurDate] = useState(new Date());

이때 빨간색 표시가 되는 부분은 리 렌더링이 되는것을 방지하여 불필요하게 메모리가 소모되는 것을 방지해야한다.

MemoListItem 메모이제이션 적용하기

<aside> 💡 organism에 있는 item 폴더에는 여러개의 box요소로 이루어 질 수 있다. item 폴더의 역할은 같은 organism이지만 여러개의 organism을 묶어두는 역할을 한다. organism끼리 같은 상태값을 공유할 경우에는 item 폴더를 통해서 상태값을 관리한다.

</aside>

현재 ViewContainer에 상태값이 변경되면 MemoListItem이 리 렌더링 되면서 SelectBox까지 렌더링이 되어버리는 문제가 발생한다. 이를 방지하기 위해서 React.Memo를 사용하자

const MemoListItem = ({diaryList}) => { 
...
const [sortType, setSortType] = useState("latest");
const [filter, setFilter] = useState("all");
...
}