React hooks 리액트 훅 리스트와 map함수.

React hooks 리액트 훅 리스트와 map함수.

 

 프로그래밍에서 Iteration 즉 반복문이 없다면,

얼마나 불편하고 손이 많이 갈까요??

수작업으로 한두 개야 만들 수 있을 것입니다.

하지만 그것이 몇십 개, 몇백 개씩 된다면?? 어떨까요?

시간과 노력이 많이 필요할 거고 코드 자체도 아주 보기 싫겠죠.

그렇다면 리액트에서 이러한 반복을 줄이기 위해,

어떤 방법이 있을까요??

오늘도 전혀 비전문적이고 쉽게 알아보겠습니다.

 

목차.

1. 반복문이란?
2. foreach?? map??
3. 리액트와 map 함수.
4. 마치며.

1. 반복문이란?

 

 반복문이란 무엇일까요?

반복문이란, 어떠한 동작을 정해진 수 혹은 정해지지 않은 수에

맞춰 같은 활동을 반복하게 해주는 코드라고 보시면 될 것입니다.

개발자는 항상 코드를 가능한 한 짧게 짜는 습관이 필요합니다.

같은 일을 두 번 세 번 반복하지 않게 말이죠.

이는 가독성도 높여주고, 코드를 파악하고 개발, 보수하는데도 중요합니다.

그러하여 반복문을 적절히 사용할 줄 알아야 합니다.

초보자라면, 대부분 자주 사용하는 반복문은

for 혹은 while 정도 알고 사용하실 것 같습니다.

그렇다면 꼭!! 자신이 사용하는 언어의 Document를 읽어보세요.

생각보다 훨씬 많은 반복에 사용되는

문법이나 함수들이 존재할 것입니다.

오늘은 그중 foreach와 map에 관해 알아보려고 합니다.

 

2. foreach?? map??

 

foreach와 map은 둘 다 반복에 사용되는 함수입니다.

둘다 callback 함수를 가지며, 배열을 반복한다는 특징이 있습니다.

그렇다면 foreach와 map의 차이는 무엇일까요?

map은 foreach와 다르게 return 값을 가지며,

또 다른 배열로 결과가 나옵니다.

아래의 코드 예시로 예를 들어보겠습니다.

const arr = ["apple", "banana", "orange"];
arr.forEach(el=> el + " is tasty!");

const arr = ["apple", "banana", "orange"];
arr.map(el=> el + " is tasty!");

 결과는 이렇습니다.

undefined

["apple is tasty!", "banana is tasty!", "orange is tasty!"]

 또한 이 둘 역시 인덱스를 가질 수 있습니다.

아래의 코드를 보시죠.

 

const arr = ["apple", "banana", "orange"];
arr.forEach((el, index)=> console.log(index));

const arr = ["apple", "banana", "orange"];
arr.map((el, index)=> index);

 

이렇게  el과 index를 괄호로 감싸주시면 됩니다.

그럼 결과 값을 보겠습니다.

0
1
2

[0, 1, 2]

이러한 내장 함수를 이용하여 보다 편리하고 쉽게 반복문을 작성 가능합니다.

하지만 while은 조심해야 합니다. 왜일까요??

while은 대체로 얼마나 반복해야 하는지 모르는,

즉 끝이 불분명한 반복에서 사용합니다.

그렇기에 while은 foreach 혹은 map으로 대체가 어려울 수 있습니다.

하지만 for은 얼마든지 가능합니다. 다만 배열로 사용한다면 말이죠.

가능하다면 내장 함수를 이용해, 훨씬 간결하고 가독성 좋은

코드를 작성하시길 바랍니다.

 

3. 리액트와 map 함수.

 

 우리는 방금 map이라는 함수에 관해 배웠습니다.

배열을 반복하고, callback함수를 가지며, return 값을 가집니다.

또한 그 값은 다시 배열로 나타나게 됩니다.

그리고 괄호 안에 index를 지정해 index 순서를 사용하기도 합니다.

그럼 이러한 map 함수는 리액트, 리액트 훅 혹은 리액트 네이티브에

없어서는 안 될 소중한 존재입니다.

 

이는 리액트에서 리스트를 만드는 요소로 사용되기 때문입니다.

아래의 예시를 보시죠.

import React from 'react';

const App = () => {
  const arr = ['apple', 'banana', 'orange'];

  return (
    <div className='App'>
      {arr.map(el => (
        <p>{el}</p>
      ))}
    </div>
  );
};

export default App;

저번 시간에 언급하였듯이.

JSX안에 변수 혹은 함수를 사용하려 할 시 중괄호 {}를

이용해야 한다고 말씀드렸습니다.

즉 map 함수를 div안에 존재하는 중괄호 안에 삽입했습니다.

그리고 return 값으로  <p>{el}</p>가 존재합니다.

이는  사실 아래의 코드와 같습니다.

import React from 'react';

const App = () => {
  const arr = ['apple', 'banana', 'orange'];

  return (
    <div className='App'>
        <p>apple</p>
        <p>banana</p>
        <p>orange</p>
    </div>
  );
};

export default App;

이 두 개의 코드는 완전히 동일한 작업을 수행합니다.

지금은 크게 차이가 없어 보입니다.

하지만 과연 3개가 아닌 100개라면? 어떨까요?

두 번째 코드는 미친 듯이 길어질 것입니다.

 

결과 값은 어떨까요?

이렇게 3개의 동일한 사과, 바나나, 오렌지가 렌더링 된 것이 보입니다.

이렇게 리액트에서 map함수는 리스트를 위해 꼭 필요한 함수입니다.

 

또한 리액트에서 map함수로 리스트를 만들고자 할 때

꼭 필요한 것이 하나 있습니다.

그것은 바로 key라는 값입니다.

key는 리액트에서 어떠한 항목의 변경이나 추가에 식별자로 쓰입니다.

그 말은 즉 key는 유니크한 값을 가져야 한다는 것입니다.

리스트 중 같은 key 값을 가진다면 분명히 리액트는 불평할 것입니다.

그렇다면 key값은 어떻게 주어야 할까요? 그리고 어떤 값을 주어야 할까요?

key 값은 항상 map 함수 안의 부모 태그에게 주어야 합니다.

그리고 key 값은 대체로 index 값을 사용하는 경우가 잦습니다.

아래의 예시를 보시겠습니다.

import React from 'react';

const App = () => {
  const arr = ['apple', 'banana', 'orange'];

  return (
    <div className='App'>
      {arr.map((el, index) => (
        <div key={index}>
            <p>{el}</p>
        </div>
      ))}
    </div>
  );
};

export default App;

위의 코드는 div가 p태그를 감싸고 있습니다.

즉 div가 부모, p가 자식 태그가 됩니다.

그렇기에 key 값은 부모 태그인 div에 주어진 것을 알 수 있습니다.

또한 유니크한 값으로 index 값을 주었습니다.

이는 사실 결과에 변화를 주지는 않습니다.

하지만 리액트에게는 아주 중요한 존재입니다.

그러므로 꼭 key 값을 까먹지 마시기 바랍니다.

 

4. 마치며.

 

 오늘 배운 반복문에 관해 다시 한번 정리하겠습니다.

 

1. 반복문은 for, while 말고도 많이 존재합니다.
2. 함수로 반복문을 사용하면 훨씬 짧고 쉽게 작성 가능합니다.
3. 각각 사용하시는 프로그래밍 언어의 Document를 꼭 읽어보세요.
4. 리액트에서 map이라는 함수는 리스트를 작성할 때 사용합니다.
5. JSX안에 변수와 함수를 사용하려면 중괄호를 이용합니다.
6. 리스트에는 key라는 유니크한 값이 꼭 들어가야 합니다.
7. key 값은 항상 map 함수 안의 부모 태그가 가집니다.

오늘은 이렇게 반복문과 짧게나마

리액트에서 리스트 작성방법을 배웠습니다.

항상 조금씩 여러분들께 리액트에 관해 정보를 나눌 수 있어

너무너무 기쁩니다.

많은 분들이 리액트를 공부하시고, 스스로 작은 프로젝트를

만든 실 수 있으실 때까지 천천히 그리고 꾸준히 많은 정보

나누어 드리려 합니다.

시간이 짧습니다.

항상 건강하시고 도전하시기 바랍니다!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.