[문법] .map() 메서드 이용해서 반복 줄이기

li로 반복해서 나열했던 부분을 어떻게 더 줄일까 생각하다가 .map() 이라는 메서드를 발견했다!

 

개념

- [array].map(콜백함수(){ 반복할 것});

- array 안에 자료 갯수 만큼 콜백함수안의 코드(반복할 것)를 반복해줌

function App() {

  [1,2,3].map(function(){
    console.log('안녕');
  });

}

 

=> 이러면 console.log('안녕'); 이 3번 찍힌다.

1.  파라미터 사용
- [array].map(콜백함수(파라미터){ 반복할 것});

 

📌 파라미터란? => ( 👩🏻: 자바스크립트의 함수 매개변수처럼 동작!!)

1. 컴포넌트 간 데이터 전달 (Props)

- 파라미터의 개념은 리액트에서 **Props(프로퍼티)**
- Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 객체
- 함수나 클래스 컴포넌트에서 매개변수(parameter)처럼 사용
2. 이벤트 핸들러 파라미터

- 특정 동작에 데이터를 전달하기 위해 함수에 인수로 전달.

function App() {

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

}

 

=> 1 2 3 1 2 3 이 찍힌다

👩🏻: 

❓ 왜냐고? 

a(파라미터)는 array 자료에 있는 데이터들을 가리킨다!

??? 근데 여기서 내 문제점은 한번만 나와야 할 숫자들이 2번씩 호출된다는 것!

 

그래서 찾아보니 StrictMode 때문!
📌 React.StrictMode가 두 번 실행되도록 설계된 이유는 상태 관리와 렌더링 문제를 조기에 파악하기 위함
실제 배포 시에는 StrictMode의 영향이 없으므로, 두 번 실행되는 문제는 신경 쓰지 않아도 된다고는 하지만 내가 불편해!!!

 

해결방법=>

 

 

 

 

App.jsx를 main.jsx에서 import 시키고 있기 때문에 main.jsx에서 <StrictMode> 주석 처리!

하니까 원하던 대로 한 번 씩만 출력된다!!

 

 

 

 

 

 

휴우.. 별거 아니라도 문제가 발생하면 당황하게 된다!
그치만 해결하면 뿌듯하다>.,<
오류를 잘 해결해가는 것도 중요하다고 생각한다!

 

2.  return 이용하기
- return 안의 값을 array 안의 데이터 갯수만큼 반복

 

응용

import { useState } from 'react'

function App() {
  let [나이, 나이변경] = useState([
      ['민수', 20],
      ['영희', 32],
      ['순신', 5],
      ['맹구', 1],
  ]);

  return (
    <>
      <div className="test">
        
        <ul>
          <li>{나이[0][0]}: {나이[0][1]}</li>
          <li>{나이[1][0]}: {나이[1][1]}</li>
          <li>{나이[2][0]}: {나이[2][1]}</li>
          <li>{나이[3][0]}: {나이[3][1]}</li>
          {/* 일반 태그 map 사용 */}
          {나이.map((item, index) => <li key={index}>{item[0]}: {item[1]}</li>)}

          <Li key={0} a={0} b={0} c={1} 나이={나이}/>
          <Li key={1} a={1} b={0} c={1} 나이={나이}/>
          <Li key={2} a={2} b={0} c={1} 나이={나이}/>
          <Li key={3} a={3} b={0} c={1} 나이={나이}/>
        </ul>

      </div>
    </>
  )
}

function Li({a,b,c,나이}){
  return(
    <>
      <li>{나이[a][b]} : {나이[a][c]}</li>
    </>
  )
}

export default App;

 

 

👩🏻: key 값이 없으면 에러남! 

❓ 왜냐고? 

 

1. React 경고 메시지

- React는 각 요소에 고유한 key가 필요하다고 경고 메시지를 출력 -> console 창 보기 싫음!

2. 비효율적인 DOM 업데이트

- 예를 들어, 특정 요소만 바뀌었을 때 React가 key를 제대로 판단하지 못하면 리스트 전체를 다시 렌더링할 가능성이 높아짐

3. 오작동 가능성
- key가 잘못 설정되면 React가 변경된 데이터를 잘못 인식하여 원하지 않는 동작이 발생할 수 있음

 

📌 그럼 좋은 key 값을 설정하려면?

1. 고유성

- 리스트 내에서 유일

2. 안정성

- 리스트가 변경되더라도 key 값은 변경 되면 안됨!! ❌

예: 데이터베이스의 고유 ID를 사용

3. 인덱스 사용은 신중히

- 리스트가 고정된 순서로만 사용된다면 index를 key로 사용 가능 ⭕

- 하지만 리스트가 정렬되거나 항목이 추가/삭제되는 경우에는 인덱스 사용은 권장되지 않음 ❌

 

 

 

 

 

 

컴포넌트 + map 사용 응용!

<ul>
    <Li a={0} b={0} c={1} 나이={나이}/>
    <Li a={1} b={0} c={1} 나이={나이}/>
    <Li a={2} b={0} c={1} 나이={나이}/>
    <Li a={3} b={0} c={1} 나이={나이}/>
    {/* 컴포넌트 map 사용 */}
    {나이.map((item, index) => (
    	<Li key={index} a={index} b={0} c={1} 나이={나이} />
    ))}
</ul>