컴포넌트 (2) 썸네일형 리스트형 원티드 프리온보딩 8조 8번 과제: 컴포넌트 렌더링 개선 후기 8번 기업 과제에서 제가 담당한 컴포넌트는 목록의 아이템 컴포넌트입니다. 제가 만든 컴포넌트와 연동되는 컴포넌트들은 검색 창 컴포넌트와 모달 창 컴포넌트였습니다. 그중에서도 모달을 어떻게 재사용하면서 아이템에서 이벤트가 발생할 때 화면에 보여줄 지 고민하였고 개선 과정을 공유하려고 합니다. 저는 초기에 컴포넌트 구조를 다음과 같이 짰습니다. +-- index +-- search bar +-- itemgroup +-- item, modal 리스트 ... 하지만 이렇게 되니 props으로 받아온 data 리스트의 반복문을 돌면서 item과 함께 모달도 생성될 수 있었습니다. 조건부 렌더링으로 화면에 보여지지는 않지만 리스트 개수만큼의 조건을 dataList가 바뀔 때마다 거쳐야 한다는 것은 비효율적이라고 생.. React란 한때, 자바스크립트 (이하 JS)는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 수행하고 있습니다. 나아가 브라우저뿐만 아니라 모바일, 데스크톱 어플리케이션에서도 널리 쓰이고 있습니다. 우리가 보통 사용하는 웹 아키텍처는 흔히 들을 수 있는 MVC (Model View Controller), MVVM (Model View View Model), MVW (Model View Whatever) 패턴 등이 있습니다. 모델은 어플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다. 컨트롤러는 사용자에게서 요청이 들어오면 모델 데이터를 조회하거나 수정하여 변경 사항을 뷰에 반영합니다... 이전 1 다음
