230530 TIL

데이터 만들기(토이플젝)

지금 하고 있는 토이프로젝트에서 각 유형별로 이미지경로, 이미지 사이즈 정보를 이미지 태그의 속성을 주고 유형 이름 데이터를 텍스트로 넘겨주어야 했다. 처음 아이디어는

1. 이미지+유형 이름을 가진 컴포넌트를 만들어줘서
2. 상위 컴포넌트에서 각 정보를 props로 넘겨준다.

였다.

 

이렇게 되면 상위 컴포넌트에서 이미지+유형 컴포넌트를 3000개 만들어야 하는데 그렇게 되면 코드도 3000줄이 되지만 각각의 속성이 다르기 때문에 어쩔 수 없다고 판단했었다.(사실 데이터화 시키는 것도 생각했지만 어떻게 만드는지 찾아보는 게 귀찮았었다ㅎㅎㅎ) 그런데 프로젝트를 같이 하는 동기분이 데이터를 만들어서 map을 돌리자고 하셨고 data 폴더에 배열로 각 유형별 속성을 넣어 데이터를 만들어 주었다.

 

처음에는 module.exports 를 사용했는데 import 한 파일을 사용할 수 없어서 해당 컴포넌트에서 require도 써봤는데 Node.js 환경에서 사용되는 함수라서 브라우저에서는 작동이 안 되었다. 데이터를 불러오는 모든 작업은 import 다른 파일에서 사용하기 위해서는 export 해줘야 한다는 사실을 명심!! 하자!!

 

그래서 결국 131212312줄이던 코드가 map 함수 하나로 단 5줄 만에 모든 유형을 보여줄 수 있었다.

 

머리를 조금 고생시키면 코드가 간결해진다. 귀찮다고 넘기지 말고 머리 써서 코드를 짜자!