[React_study] React에서의 List 생성 (map)

* 자바스크립트에서의 map 함수 사용하는 방법

• 모든 array 자료에는 map() 메서드를 사용할 수 있다.
• map() 메서드가 가지고 있는 기능을 예시를 통해 확인

* 예시 코드 (기능1)

- array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행

- console.log(1) 3번 실행

const array = [1,2,3];
array.map(function(){
  console.log(1)
});

* 예시 코드 (기능2)

- 콜백함수의 첫번째 인자값을 넣어서 array안에 있던 모든 자료를 하나씩 출력해준다.

- 2, 3, 4가 콘솔창에 출력된다.

const array = [1,2,3];
array.map(function(a){
  console.log(a)
});

* 예시 코드 (기능3)

- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

- newArray를 출력하면 [10, 20, 30] 이 출력된다.

const array = [1,2,3];
const newArray = array.map(function(a){
  return a * 10
});

console.log(newArray)

---

* JSX안에서 html을 반복생성하기

- 리액트 중괄호안에서 html을 반복생성하고 싶다면 map을 이용해도된다.

- <div>Hello world</div>가 3개 생성된다.
(참고) map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해야한다.

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( 
            <div>Hello world</div> 
          )
        }) 
      }
    </div>
  )
}

 

• [1, 2, 3]이라는 array에 map 메서드를 이용하여서 그안의 자료 갯수만큼 내부의 코드를 실행시켜준다.
• return안에 있는 코드를 array안에 담아서 반환해준다.
• [ <div>Hello world</div>, <div>Hello world</div>, <div>Hello world</div> ] 이런식으로 값이 남게 되고
• 해당 값을 html로 보게 되면 아래와 같이 보인다. 그래서 map을 사용하여도 반복생성이 가능하다.

<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>

* JSX안에서 html을 반복생성하기 예시 코드

function App (){
  const [title, setTitle] = useState(['Hello', 'world', 'bye']);
  
  return (
    <div>
      { 
        title.map(function(title){
          return (
            <div className="list">
              <h4>{ title }</h4>
            </div> 
          )
        }) 
      }
    </div>
  )
}​

 

---

* (참고) 일반 for 반복문을 사용하고 싶다면

1. html들을 담을 array 자료를 하나 만들어준다.
2. 일반 for 반복문을 이용해서 반복문을 돌린다.
3. 반복될 때 마다 array자료에 <div>를 하나씩 추가해준다.
4. 원하는곳에서 {array자료}를 사용하면 된다.

* 일반 for 반복문 예시 코드
- for 문법은 JSX안에서 사용할 수 없어서 아래의 예시처럼 바깥에서 사용하면 된다.

function App (){
  
  const array = [];
  for (let i = 0; i < 3; i++) {
    array.push(<div>Hello world</div>)
  }
  return (
    <div>
      { array }
    </div>
  )
}