React: Monster

🚀오늘 할 일

지금까지 배운 react의 state, props를 활용해서 재사용가능한 컴포넌트 활용하기
어떻게 할까? github상에서 react-exercise를 받아서 초기 세팅(npm install)을 하면 된다.

준비단계

클론 프로젝트의 첫시작 = 클론받기 + npm install
처음에 node.js를 받을 때, 너무 상위 폴더에 받아서 그런지 항상 npm install을 누르면, error가 떴다. 이를 해결하기 위해서 터미널 상에서 존재하는 파일을 열어보고 기존에 있던, node_modules를 제거하였다. 그리고 나서 다시 npm install.... 하지만, 별로 효과는 없었다. 결국 Desktop의 새로운 폴더 생성후 그 안에 clone을 받은 후에 해결! (node_modules 지우면 된다고 인터넷에서 봤는데 왜 안되는지는 의문)

1차 관문(데이터 파일 받아오기 && 컴포넌트에 props형태로 state전달)

외부데이터를 fetch함수로 받아와서, monsters라는 state에 setUp을 하였다. 그 후에, 하위 컴포넌트인 CardList에 해당 monsters props를 내려줬다. state를 가장 최상단의 구성요소에 만들고, 해당 state가 필요한 컴포넌트에 내려다 주는것은 여러강의에서도 나온 내용이라 이제 익숙했다.

2차 관문(컴포넌트에서 map 함수 돌리기)

카드가 총 10개 존재하고, 카드 하나하나의 데이터가 monsters에 객체형태로 들어있기 때문에 monsters라는 카드정보가 담긴 배열을 map함수를 이용하여, 모든 카드 정보의 id, name, email정보를 하위 컴포넌트인 Card에 내려준다. 그렇게 얻은 데이터를 cardList라는 className의 div태그에 넣으면, 카드가 담길 공간이 생긴다.

마지막 관문(카드 구성요소 적절한 태그에 넣기)

2차까지가 어려운 부분이였고, 마지막은 카드하나의 구성에 맞는 태그를 부여하는 일이였다. 구조분해할당으로 가져온 props의 id값은 사진을 불러오기 위한 수단으로 사용하고, 이름은 h2태그에 넣고, email은 p태그에 넣어 이름을 더 크게 표기하였다.

최종결과물

이렇게 하여, 각각의 monste의 사진, 이름, email이 담긴 카드가 나왔다.

소감

지금까지는 일단 코드를 작성하고 컴포넌트를 나누는 작업을 했다면, monster 프로젝트는 처음부터 컴포넌트 구조화를 할곳을 파악하고 각각을 컴포넌트화 시킨 후, 코드의 길이를 획기적으로 줄이는 방식이였다. 컴포넌트를 재사용하면서, 복잡은 하지만, 코드의 가독성과 유지보수성을 높일 수 있다는 것을 체감할 수 있었다. 이제 이 카드에 다른 데이터를 넣고 싶으면, props를 하나 더 받아와서 Card컴포넌트 리턴값에 추가만해주면 되는것을 깨달았다. 또한 monster로 인해 state가 계속 props로 내려가다 보면 헷갈릴 수 있지만, 구조분해할당으로 각각이 어떠한 데이터를 갖고 있는지 console을 쓰지 않고도 쉽게 코드만 보고 파악할 수 있었다.