React에 대해 공부하기6 - map함수

 

오늘은 매번 정리해야지 정리해야지 했던 map함수에 대해 제대로 정리해보려고 한다.

 

map함수

 반복되는 컴포넌트를 렌더링 하기 위하여 자바스크립트 배열의 내장 함수인 map()을 사용한다. 

쉽게 예를 들어,  배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들고 싶을 때 사용해 볼 수 있다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = n => n * n;
const squared = array.map(square);
console.log(squared);

이런 식의 예시를 들어볼 수 있다.

map 함수의 파라미터로는 변화를 주는 함수를 전달해 준다. 이를 변화함수라고 한다.

현재 이 변화함수 square는 파라미터 n을 받아와서 이를 제곱해 준다.

array.map 함수를 사용할 때 square를 변화함수로 사용함으로써, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성했다.

변화 함수를 꼭 이름을 붙여서 선언할 필요는 없이. 다음과 같이 코드를 다음과 작성해도 된다.

const squared = array.map(n => n * n);
console.log(squared);

중요한 키워드는 반복되는 컴포넌트 렌더링하기 쉽게 코드를 짜는 것이다.

실제로 내가 1차 스터디 때 사용했던 예시는 이렇다.
1차 스터디 때, 각각의 웹툰 주소와 이미지 배열을 렌더링 하게 되었는데

처음에는

function Webtoon1() {
return (
<>
<Link to ="blahblah.com"></Link to>
<img src="blahblah.jpg"></img>
</>
)
}

(지금 처음 기획당시 버전을 백업해 놓은 게 없어서 코드를 까먹었는데 대충 이러한 느낌이었다는 걸 명심하자)

이런 식으로 주소와, 이미지를 웹툰 개수에 맞게 가져와야 하는데 당시 리액트를 처음 접하고 컴포넌트에 대해

무지했던 나는 무식하게 
function Webtoon2

function Webtoon3

function Webtoon4

function Webtoon5

.

.

.

.

컴포넌트를 증식시켜 만들어냈다.

실제로 구현이 되긴 했지만 후에 팀원과의 피드백을 통해 이런 식의 코드는 가독성, 관리, 홈페이지가 무거워지는 문제가 발생한다고 해서 map함수를 공부해 바꿨던 것이다.

 

그리하여 리팩터링 한 코드가 이거였다.

export default function Swip()  {
  return (
  <>
          {users.map((users)=>
           <p><a href={users.First}>
           <img src={users.Last}alt =""></img></a></p>     
          )
    }
    </>

이런 식으로 당시 썼던 slide 기능 안에 저러한 map함수를 넣어 리팩터링 하였다.

(이 개념은 두고두고 공부해야 할 거 같아서 꼭 정리해 남겨놓을 것이다.)

 

저 코드의 개념은 
users의 정보에서 First와 Last를 배열에서 가져와 렌더링 한다는 뜻이다.

 

(원래는 json파일에 더미를 만들어놔야 하지만,

Users라는 컴포넌트를 그냥 만들었다 이런 식으로)

//Users.js

const users = [
    {First: "https://comic.naver.com/webtoon/list?titleId=103759", Last: "https://image-comic.pstatic.net/webtoon/103759/thumbnail/thumbnail_IMAG21_3546920286159910456.jpg"},
    {First: "https://comic.naver.com/webtoon/list?titleId=602921", Last: "https://image-comic.pstatic.net/webtoon/602921/thumbnail/thumbnail_IMAG21_3847030872581824819.jpg"},
    {First: "https://comic.naver.com/webtoon/list?titleId=704595", Last: "https://image-comic.pstatic.net/webtoon/704595/thumbnail/thumbnail_IMAG21_3978194032709283938.jpg"},
    {First: "https://comic.naver.com/webtoon/list?titleId=557527", Last: "https://image-comic.pstatic.net/webtoon/557527/thumbnail/thumbnail_IMAG21_7090408969817175097.jpg"},
    {First: "https://comic.naver.com/webtoon/list?titleId=687127", Last: "https://image-comic.pstatic.net/webtoon/687127/thumbnail/thumbnail_IMAG21_4063431270715437410.jpg"}
  ];

  export default users;

이런 식으로 Users.js 에서 users를 컴포넌트화 해서

map함수에 넣어 랜더링 하는 방식으로 리팩터링 하였다.

 

이 개념을 처음에 이해하는데도 오래 걸렸지만, 실제로 이해는 했지만 내가 직접 코드를 짜는데 엄청난
시간이 걸렸다. 성공적으로 구현 됐을 때의 짜릿함이란.. 아마 내가 개발자의 길을 걸으며
처음 느껴봤던 희열 같았다.

 

앞으로도 이러한 중요한 개념이나, 사건들, 코드, 자주 발생하는 오류등은 정리를 해두어
마치 사전처럼 자주 참고를 하며 공부할 계획이다.

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript