-
nomad) react .map( )React 2023. 3. 17. 14:05
.map( )
: 이 메소드를 이용하면 배열에 들어있는 모든 요소들에 실행문을 할 수 있다 ( foreach 랑 비슷하다 )
toDos = [ 1, 2, werq, 523 ] 같은 배열이 있다고 보자
toDos.map( ) -> .map 메소드의 첫 번째 인수는 배열 내부의 값들이다. 배열 내부의 값들을 하나씩 가지고나온다
두 번째 인수는 배열 값의 index이다. 따라서 우리는 값과 순서를 알 수 있다.
toDos.map( (item,index) => ( <li key={index}> {item} </li> ) )
-> li 를 생성한다 , 각 li는 toDos 배열의 값과 index를 내용과 키 값으로 받는다
** 해당 함수에서 item 과 index의 이름은 사용자가 자유롭게 지정할 수 있다
** react의 특성상 같은 component의 list를 render 할 때는 해당 list에 key값을 prop로 넣어야한다.
'React' 카테고리의 다른 글
React Router (ver. 6 이상) (0) 2023.03.19 OPEN API 데이터 불러오기 ( fetch ) (0) 2023.03.19 nomad) react useState( [] ) 활용 (0) 2023.03.17 nomard) Clean Up 함수 (0) 2023.03.16 nomard) React 설치 및 연결 (0) 2023.03.16