🌱 기초 프론트엔드
리스트 렌더링이란?
쉽게 이해하기
쇼핑몰에서 상품 목록을 떠올려보세요. 똑같은 형태의 상품 카드가 반복되지만, 각각 다른 사진과 이름, 가격이 들어있죠. 리스트 렌더링은 이렇게 같은 틀에 다른 데이터를 채워서 여러 개를 한 번에 그리는 거예요.
핵심 정리
배열 데이터를 반복해서 화면에 그리는 방법이에요.
자세히 알아보기
리스트 렌더링은 배열에 담긴 데이터를 반복문으로 돌려서 화면에 보여주는 기술이에요. 실무에서 엄청나게 자주 쓰이는 패턴이죠.
예를 들어 게시판을 만든다고 해볼게요. 게시글 10개가 배열에 담겨 있다면, 이걸 하나하나 손으로 10번 복사-붙여넣기 하는 게 아니라, 반복문으로 돌려서 자동으로 10개의 게시글 UI를 만들어요. 데이터가 100개든 1000개든 코드는 똑같아요.
React에서는 map() 함수를 써서 리스트를 렌더링해요. 배열의 각 항목마다 컴포넌트를 만들고, 각각에 고유한 key를 줘야 해요. 이 key는 React가 어떤 항목이 변경되었는지 추적하는 데 쓰여요. Vue는 v-for 디렉티브를, Svelte는 {#each} 블록을 사용해요.
리스트 렌더링은 SNS 피드, 검색 결과, 상품 목록, 메뉴, 댓글, 알림 등 거의 모든 곳에서 사용돼요. 데이터 기반 UI를 만드는 핵심 기술이고, 성능 최적화를 고려해야 하는 부분이기도 해요. 항목이 수천 개일 때는 가상 스크롤 같은 기법도 함께 써야 하죠.