TagBox 컴포넌트에서 모든 작업을 하지는 않습니다. 이 컴포넌트를 만들 때 TagItem, TagList라는 두 컴포넌트를 추가로 만들었는데, 이렇게 컴포넌트를 분리시킨 이유는 렌더링을 최적화하기 위해서입니다. 현재 TagBox 컴포넌트는 두 가지 상황에서 렌더링을 합니다. 첫 번째는 input이 바뀔 때이고, 두 번째는 태그 목록이 바뀔 때입니다.

만약 컴포넌트를 분리하지 않고 한 컴포넌트에서 전부 직접 렌더링한다면, input 값이 바뀔 때 태그 목록도 리렌더링될 것입니다. 태그 목록이 리렌더링되면 또 태그 하나하나가 모두 리렌더링되겠지요.

하지만 위에 작성한 코드처럼 TagList와 TagItem 컴포넌트를 분리시켜 주면 input 값이 바뀌어도 TagList 컴포넌트가 리렌더링되지 않습니다. 그리고 태그 목록에 변화가 생겨도 이미 렌더링 중인 TagItem들은 리렌더링되지 않고, 실제로 추가되거나 삭제되는 태그에만 영향을 미치게 됩니다.

컴포넌트를 분리하기만 하면 최적화가 되는 것은 아닙니다. 추가로 React.memo를 사용하여 컴포넌트들을 감싸 주면, 해당 컴포넌트가 받아 오는 props가 실제로 바뀌었을 때만 리렌더링해 줍니다. shouldComponentUpdate를 구현하고 모든 props를 비교해 보는 것과 동일하죠.