ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 코드기록:: map 메소드 활용한 feed
    Study/React 2020. 7. 19. 19:59

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

     

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

     

     

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

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

     

     

     

    인스타그램 메인페이지 구현한 화면

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

     

     

     

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

     

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

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

     

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

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

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

     

     

    코드를 살펴보자.

     

    Screen Shot 2020-07-19 at 7 51 52 PM

     

     

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

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

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

     

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

     

     

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

    'Study > React' 카테고리의 다른 글

    가상돔  (0) 2021.09.18
    Loading, Error 컴포넌트 생성하기 - 1. Skeleton Loading  (0) 2021.07.11
    React Router  (0) 2020.07.19
    hook을 사용하는 이유  (0) 2020.07.16
    fetch 함수와 활용예제.  (0) 2020.07.14

    댓글

Designed by Tistory.