React

nomad) react .map( )

hojomu 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로 넣어야한다.