리액트 기초(하나하나 따라해보기) 7편

이렇게 반복되는 리스트를 출력할때 언제나 하드코딩으로 할 수 없다.

그래서 반복문을 자주 사용하게 되는데. 리액트에서 반복문을 사용하는 방법은 map을 사용한다.

map 을 사용하는 문법이다. 사용한 state 의 변수이름을 적는다.

나는 상단에 변수로

이런 State 를 만들었기에 반복이라는 이름을 가진 변수가 생성되었다.

여기서 반복.map 을 찍으면 function 내부에서 반복에 있는 배열의 길이만큼 반복시킨다.

function 내부 매개변수로 a 만을 써도 되고, a , i 를 같이 써도 되는데. i 는 0인덱스부터 하나씩 차례대로 늘어나는 숫자이고 a 는 각 배열의 각각의 값들을 차례로 찍어준다.

따라서 나같은 경우는 {반복[i]} 를 넣었는데 {a} 이렇게 넣어도 같은 결과값이 찍힌다.

실행해보면 이렇게 고양이 캣타워부터 고양이 친구들이 보이는 것을 확인할 수 있고 클릭시 이벤트도 넣었기에
제목을 클릭하면 이렇게 보인다.

그럼 이만~!