코딩하는 고릴라

[React] 반복되는 div 축약하기(map) 본문

React

[React] 반복되는 div 축약하기(map)

코릴라입니다 2023. 11. 7. 16:57

 map 함수를 사용해 줄이기

 

 

  - 아래 코드를 살펴보면, className이 "list"인 <div>가 여러번 반복됨을 확인할 수 있다.


 

 - 위와 같은 코드의 반복을 줄이기 위해 게시글의 제목이 담긴 state인 title와 map함수를 사용할 수 있다.


 

 

 - Line 2 : title state의 각 요소들(Title1, Title2, Title3)을 element라는 이름으로 받아온다.

 - Line 5 : 기존에 title[0], title[1], title[2]로 하드코딩된 부분을 {element}로 바꿔 title에 담겨져 있던 요소들을 꺼내 해당 위치에 넣어 사용할 수 있다.

반응형

'React' 카테고리의 다른 글

[React] Input으로 state 변경  (0) 2023.11.07
[React] 하위 컴포넌트에 props 전달  (0) 2023.11.07
[React] Component  (0) 2023.11.07
[React] state 변경 함수 동작 원리, Array 값 변경  (0) 2023.11.06
[React] state, onClick  (1) 2023.11.06