React - Array.map 활용하여 component 만들기

emojipedia라는 토이 프로젝트로 array.map과 component를 결합하는 것을 배웠습니다.

 

위 화면을 띄우기 위해 component를 만들지 않으면

이렇게 App.jsx에 수많은 div들이 등장합니다.

 

dictionary 클래스를 가지고 있는 dl 태그 안에 term 클래스를 가지고 있는 div가 반복되고 있습니다. 

(코딩할 때 반복이 보이면 무조건 함수를 사용하든 뭘 하든 줄이라고 배웠습니다.)

일단 단어가 들어갈 Entry라는 component를 만듭니다.

 

emojipedia.js에 id, emoji, name, meaning의 데이터를 array의 방식으로 저장했기에

그 안에 props로는 name, emoji, description을 argument로 받을 수 있게 구성했습니다.

 

(array 자료형에 반복된다? 반복문 못 참지)

 

 

그 다음 App.jsx에 Entry component와 emojipedia 데이터를 import 해준 다음

array의 반복문 map을 사용하기 위해 createEntry라는 콜백 함수를 만들어줍니다.

 

map을 돌 때마다 해당 object의 id, emoji, name, meaning을 받아서 Entry component의 props로 활용하는 구조입니다.

그리고 dictionary 안에서 emojipedia.map(createEntry)를 실행합니다.

 

map이라는 메서드는 for문처럼 arr의 각 요소들을 callback을 실행시켜줍니다. 

 

이렇게 반복문을 실행하는 구조로 설정했기에

(계속 읽으려면 아래로!)

emojipedia에 데이터를 추가해주면 알아서 화면에서는

(계속 읽으려면 아래로!)

짠! 하고 알아서 Entry component가 생성됩니다. 

---

점점 리액트의 힘을 느끼고 있습니다.

 

물론 지금까지 배운 건 새발의 피의 백혈구만도 안 되겠지만 바닐라 js로 고생해서 만들었던 것들이

리액트에서는 쪼개고 필요한 요소들을 가져와서 조작하는 것이 훨씬 편하다는 게 체감될 정도입니다.

 

리액트를 배우면 배울수록 불편한 점들이 해소되는 게비스콘 같은 마법이 펼쳐지고 있어

내일은 어떤 개념을 배울까 설렘을 가지고 맞이할 수 있겠네요.