[React Exam 34] map()을 이용한 10간(十干)/ 12지(十二支) 나열하기
다음은 데이터 파일 입니다.export const ZODIAC1 = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");export const ZODIAC2 = "자,축,인,묘,진,사,오,미,신,유,술,해".split(",");export const ZODIAC3 = "子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥".split(",");export const HOURS = "23시~01시,01시~03시,03시~05시,05시~07시,07시~-09시,09시~11시,11시~13시,13시~15시,15시~17시,17시~19시,19시~21시,21시~23시".split(",")export const LIVERS1 = "갑,을,병,정,무,기,경,신,임,계".split(",");export cons..
[React Exam 30] map() 사용 시 올바른 key 사용법
키는 주변 배열의 context에서만 의미가 있습니다. 예를 들어 ListItem 컴포넌트를 추출 한 경우 ListItem 안에 있는 엘리먼트가 아니라 배열의 엘리먼트가 key를 가져야 합니다.let users = [ { id: 11, username: "한사람", age: 18, gender: true }, { id: 12, username: "두사람", age: 22, gender: true }, { id: 13, username: "세사람", age: 28, gender: false }, { id: 14, username: "네사람", age: 16, gender: true }, { id: 15, username: "오사람", age: 44, gender: false ..
[React Exam 29] map()을 이용한 반복 렌더링
컴포넌트를 렌더링 하면서 반복되는 코드들 때문에 코드 줄이 길어지고 이러한 문제를 반복문으로 해결할 수 없을까 고민하면서 방법을 찾아보게 되었습니다. 다음과 같은 데이터가 있다고 할때const NAMES = "한놈,두시기,석삼,너구리,오징어,육계장,칠면조,팔다리,구두쇠,쨍그랑".split(","); 반복문이 없다면 다음과 같은 코드가 만들어 집니다.const LoopRendering1 = ()=>{ return ( style={{clear:"both"}}> {/* 반복문이 없으면 난감하다. */} {NAMES[0]} {NAMES[1]} {NAMES[2]} {NAMES[3]} ..
