코드기록:: map 메소드 활용한 feed

이전까지 나는 블로그를 작성할 때,
나의 코드기록 보다는 다른 사람의 멋진 코드기록들을 가져와 언어를 배우고 기록했다.

 

그러나 위코드 1달째 수강 중,
멘토님께서 나의 코드를 refactoring하고 기록하며 공부하는 것이 제일 큰 공부가 된다고 말씀하셨고 오늘 처음으로 이를 실천해본다.

 

 

사실 나는 웹 개발 초초초 입문자로써,
나의 코드가 화려하거나 문제해결에 탁월한 것은 아니다.
매우 일반적이고 기초적인 방법이며
혹은 나는 최선을 다했지만 다른 방법에 비해 비 효율적 일 수도 있다.

그러나 입문자로서 지금 이 시점에서의 최선의 코드를 기록하며 후에 실력이 더 향상되었을 때,
스스로 더 멋진 코드로 리팩토링 할 수 있도록 기록을 남겨본다.

 

 

 

(인스타그램 클론 메인 화면)

 

 

 

메인 화면 중, feed부분을 구현하면서 나는 내가 적은 똑같이 생긴 feed 3개를 반복하여 적은 코드가 상당히 눈에 거슬렸다.

 

더구나 이 feed를 나는 지금 3개만 만들었지만,
이 feed가 10, 100, 1000개가 되었을 경우..
어떻게 하나하나 같은 코드를 반복하며 피드를 만들어 줄 수 있겠는가.

멘토님도 반복되는 코드를 어떻게 하면 간결화 할 수 있을지 고민해보라고 하셨다.

 

그래서 나온 함수가 map이다:)

map함수는 배열의 변화를 일으켜 새로운 배열을 반환한다.

그래서 나는 임의의 mock데이터로 feeds의 데이터를 만들고,
feed의 각 데이터가 담긴 배열을 가진 feeds를 map함수를 이용해
JSX의 태그들로 합쳐진 feed의 형태가 반환될 수 있도록 구현하였다.

 

 

코드를 살펴보자.

 

 

 

나는 stories 컴포넌트 아래에 feed컴포넌트들을 위치시키고 싶어 left라는 클래스네임을 가진 div태그 안에

stories 컴포넌트와 feed컴포넌트 map 함수를 위치시켰다.

map함수를 이용해 각 feed의 데이터들을 Feed 컴포넌트로 전달해주었다.

 

그리고 그 데이터를 props를 이용해 각 feed에서 활용하여
각 feed에 데이터가 구현될 수 있도록 하였다.

 

 

처음 react에서 map함수를 다루어 본 만큼,
내가 원하는 데이터들이 각 피드에 촤르르- 구현되었을 때에 감동은 잊을 수가 없다 😽