React
  • 리액트 강의
  • * 강의 수강 전 준비 (중요)
  • 기본 개념
    • Node.js & npm
    • npm과 npx의 차이에 대해서
    • Babel
    • Bundler
    • Class
    • this
    • import, export에 관해서
    • Arrow function
    • Map
  • 1강
    • React가 뭐야?
    • 리액트를 왜 배우니 ?
    • CRA를 활용한 리액트 앱 만들기
    • 태초에 DOM이 있었다.
    • React에는 HTML이 없나요 ?
    • Component Of React
    • 영화 소개 프로젝트: 프로젝트 생성
    • JSX
    • props & state
    • 영화 소개 프로젝트: 컴포넌트 작성
  • 2강
    • 라이프사이클
      • 라이프 사이클이 뭔데?
      • render
      • componentDidMount
      • componentDidUpdate
      • componentWillUnmount
      • 라이프 사이클의 동작
    • 리액트의 스타일링
      • Pure css
      • SCSS
      • Styled-components
    • 영화 소개 프로젝트: SCSS, Styled-component
    • 영화 소개 프로젝트: 외부 라이브러리 사용해보기
    • LifeCycle Of React component - Deprecated
    • Optimizing of component - Deprecated
    • scss note - Deprecated
  • 3강
    • props 에러 관리
      • defaultProps
      • prop-types
      • 그냥 타입스크립트 쓰세요
    • Routing (준비)
    • Routing (실전)
    • history를 이용한 뒤로 가기 버튼 구현
    • 영화 소개 프로젝트: 라우팅
    • 한국 전통 음식 소개 페이지 만들기 - Deprecated
  • 4강
    • Ajax In React
    • Form in react
    • Unsplash API를 이용한 사진첩 만들기
    • Redux - 데이터를 관리하는 또 다른 방법 - Deprecated
  • 부록
    • CRA 프록시 서버 설정하는 방법
Powered by GitBook
On this page
  • for 문 말고 map 쓰세요 !
  • Map의 문법

Was this helpful?

  1. 기본 개념

Map

for -> forEach -> map !

for 문 말고 map 쓰세요 !

같은 기능을 하는 예제 두개를 만들어 볼 것입니다. 하나는 우리가 옛날부터 사용하고 있는 문법인 for문을 사용할 것이고, 또 다른 하나는 map이라는 새로운 method를 사용해서 진행해 보도록 하겠습니다. 우선 for문을 사용했을 때를 보시죠.

for.js
const a = [1, 3, 5, 7, 9]

for (let i = 0; i < a.length; i++) {
    console.log(a[i])
}

// 1
// 3
// 5
// 7
// 9

일반적인 for문을 사용해서 배열에 있는 요소의 값을 출력해 주는 예제입니다.

다음은 map으로 구현한 예제입니다.

map.js
const a = [1, 3, 5, 7, 9];

const aLoop = a.map((unit, idx) => {
    console.log(unit);
    return unit;
});

// 1
// 3
// 5
// 7
// 9

서로 같은 동작을 하는 코드입니다. 하지만 map쪽이 훨씬 알아보기 쉽고 더 좋은 장점을 많이 가지고 있습니다. 만약 a에 있는 배열의 내용을 변경시켜 저장하고 싶다면, map을 사용하면 훨씬 편리하게 사용이 가능합니다. map은 그 자체로 새로운 배열을 만들어 내는 메소드 이기 때문입니다. 이게 무슨 말이냐면, aLoop에 들어있는 값은 새로운 배열이라는 것 입니다. 또한 다르게 저장을 할 수도 있습니다.

why-map.js
const a = [1, 3, 5, 7, 9];

const aLoop = a.map((unit, idx) => {
    console.log(unit);
    return unit + 1;
});

// 1
// 3
// 5
// 7
// 9

// aLoop: [2, 4, 6, 8, 10]

map의 메소드에서 원래 unit에 +1을 리턴만 해 주었는데도 새로운 배열이 생성되었습니다. 지금의 작업은 a 데이터에게는 영향을 끼치지 않으면서 새로운 배열을 만들어 낸 것입니다.

만약 우리가 예전 문법을 사용하고 있었다면, 다음과 같이 변경해야 합니다.

for.js
const a = [1, 3, 5, 7, 9];

const newArray = [];

for (let i = 0; i < a.length; i++) {
    console.log(a[i]);
    newArray.push(a[i] + 1);
}

// 1
// 3
// 5
// 7
// 9

// newArray: [2, 4, 6, 8, 10]

Map 메소드의 좋은 점은, 배열 변수 하나만 가지고 있어도 바로 실행이 가능하다는 점 입니다. 또한 현재 값은 손상을 시키지 않기 때문에 a배열의 원래 값은 유지하면서 새로운 배열을 만들어 내는 것이 가능합니다.

Map의 문법

// 배열.map(함수를 담습니다.) // 새로운 값을 가공할 함수 또는 로직

// 배열의 요소만큼 map에 작성된 함수가 수행됩니다. 인자는 두개를 받습니다.

// 1. 현재 요소의 값, 2. 현재 배열의 크기

// example
const a = [1, 2, 3, 4, 5];

const unit = a.map( (unit, idx) => {
    return unit - 1;
} )
// unit: [0, 1, 2, 3, 4] 
console.log(unit);
PreviousArrow functionNext1강

Last updated 6 years ago

Was this helpful?