목록컴포넌트 렌더링 (2)
브래의 슬기로운 코딩 생활
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c70TP3/btszlJiuLDV/dPsTGOh0MEtpzVVSG2fm7k/img.png)
리스트와 키란 무엇인가? 리스트(List) •같은 아이템을 순서대로 모아놓은 것 •리스트를 위해 사용하는 구조 – 배열 •배열 – 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 ◦키(Key) •각 객체나 아이템을 구분할 수 있는 고유한 값 - 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 여러 개의 컴포넌트 렌더링하기 컴포넌트 반복 구조 Array.map() •배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : map()을 호출한 배열 리스트의 키에 대해 알아보기 리스트의 키 •리스트에서 아이템을 구분하기 위한 고유한 값 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6KENR/btszgA2aSef/vLmLbxuc47qV2ppq8QHKVK/img.png)
조건부 렌더링이란? 조건부 렌더링(Conditional Rendering) •어떠한 조건에 따라서 렌더링이 달라지는 것 •조건문의 결과 true/false에 따라서 렌더링을 다르게 하는 것 ex. 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가림 자바스크립트의 Truthy와 Falsy truthy - true는 아니지만 true로 여겨지는 값 - { } (empty object) - [ ] (empty array) - 42 (number, not zero) - “0”, “false” (string, not empty) flasy – flase는 아니지만 flase로 여겨지는 값 - 0, -0 (zero, minus zero) - 0n (Bigint zero) - ‘ ‘, “ “, ` ..