Free알림 목록 (펼치기·삭제)

React 로 알림 목록을 완성하는 문제입니다. 각 알림은 제목을 누르면 상세가 펼쳐지고(행마다 상태가 있어요) 삭제할 수도 있으며, 여러 번 조작해도 각 행의 상태가 제짝 알림에 그대로 붙어 있어야 합니다. 행 컴포넌트는 제공되니 그대로 쓰고, 인메모리 알림 데이터를 렌더합니다.

목록 화면은 같은 모양의 행을 데이터만큼 반복해 그리는데, 각 행이 자기만의 상태(펼침 여부 등)를 가질 때 다루기가 까다로워집니다. 목록이 펼치기·삭제로 바뀌어도 각 행의 상태가 다른 알림으로 새어 나가지 않고 제짝 알림에 계속 붙어 있게 하는 것이 이 문제의 주제입니다. React 에서 목록을 그릴 때는 항목을 어떻게 식별하느냐가 갱신 동작에 영향을 줍니다. 한 번 조작뿐 아니라 펼치기·삭제를 섞어 여러 번 한 뒤에도 각 행의 상태가 맞는지 검증하는 습관이 중요합니다.

React 에서 목록은 어떻게 그리나요?

데이터 배열을 돌면서 같은 모양의 행을 반복해 그립니다. 이 문제는 제공된 행 컴포넌트를 그대로 쓰면서, 목록 전체를 그리고 펼치기·삭제를 다루는 것입니다.

목록의 행마다 상태가 있을 때 무엇을 검증해야 하나요?

한 번 조작만 보지 말고, 펼치기·삭제를 섞어 여러 번 조작한 뒤에도 각 행의 상태가 제짝 알림에 계속 붙어 있는지를 확인합니다.

행 컴포넌트는 직접 만들어야 하나요?

아니요. 행 컴포넌트는 제공되며 그대로 씁니다(수정하지 않습니다). 완성 대상은 목록 전체를 그리는 목록 컴포넌트입니다.