원티드 프리온보딩 8조 8번 과제: 컴포넌트 렌더링 개선 후기

8번 기업 과제에서 제가 담당한 컴포넌트는 목록의 아이템 컴포넌트입니다.

제가 만든 컴포넌트와 연동되는 컴포넌트들은 검색 창 컴포넌트와 모달 창 컴포넌트였습니다.
그중에서도 모달을 어떻게 재사용하면서 아이템에서 이벤트가 발생할 때 화면에 보여줄 지 고민하였고 개선 과정을 공유하려고 합니다.

 

저는 초기에 컴포넌트 구조를 다음과 같이 짰습니다.

+-- index
        +-- search bar
        +-- itemgroup
            +-- item, modal 리스트
	...

하지만 이렇게 되니 props으로 받아온 data 리스트의 반복문을 돌면서 item과 함께 모달도 생성될 수 있었습니다.
조건부 렌더링으로 화면에 보여지지는 않지만 리스트 개수만큼의 조건을 dataList가 바뀔 때마다 거쳐야 한다는 것은 비효율적이라고 생각했습니다.

그래서 다음과 같이 개선했습니다.

+-- index
        +-- search bar
        +-- itemgroup
            +-- item 리스트
            +-- modal
	...

이렇게 되면 일단 아이템의 개수만큼 모달이 생성될 지 말지 조건을 거치지는 않습니다.
data 리스트를 돌면서 아이템들은 생성이 되지만 modal은 한 번만 생성시키고 조건에 따라 보여주거나 감추게 할 생각이었습니다.
하지만, 여기서 저는 더 개선할 여지가 있다고 의심했습니다.

모달이라는 컴포넌트는 item 또는 itemGroup이라는 컴포넌트 안에 있다는 것 자체가 비효율적이라는 것을 깨달았습니다. itemGroup 컴포넌트에서 data 리스트라는 props가 바뀔 때마다 아이템들은 다시 리렌더링되는 것이 맞지만 모달은 그럴 필요가 없었기 때문입니다. 

 

그래서 나온 컴포넌트 구조는 다음과 같습니다.

+-- index
        +-- search bar
        +-- itemgroup
            +-- item 리스트
        +-- modal
	...

아이템 어느 하나를 클릭시 모달 상태를 변경하여 모달을 렌더링시키는 방식입니다.

 

이렇게 되면 모달은 모달 상태 변경시에만 화면에 보이므로 불필요한 렌더링이 발생하지 않을 것입니다.