map() 함수

반복문이란? 어떤 코드를 반복하고 싶을 때 사용!

리액트는 html도 반복문으로 반복시킬 수 있음! 하지만 JSX 중괄호 내에 for은 넣지 못한다.

그럼 어떻게 할까❓

map이라는 함수 활용하자!

*map함수란?

array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때 .map( ) 사용

만약 array 내에 모두 2를 곱해주고 싶다면❓

var array = [2,3,4];

var newArray = array.map(function(a){
	return a * 2
});

array안에 있는 하나하나의 값들이 꺼내져서 2가 곱해진다.

a라는 파라미터는 array안에 하나하나의 데이터를 의미!

newArray = [4,6,8] 이 된다!

{
	반복할데이터.map(()=>{
		return <HTML>
	})
}

또는

{
	반복할데이터.map(function(){
		return <HTML>
	})
}

let [글제목, 글제목변경] = useState([
    "난곡 돈까스 맛집! 오츠카도",
    "신대방 온정 돈가스 너무 매워",
    "강남 토끼정, 맛집이다 ",
  ]);
{
글제목.map(() => {
        return <div>안녕</div>;
      })
}

안녕이 글제목 갯수에 맞게 세번 출력이 되었다!

{글제목.map((글) => {
        return (
          <div className="list">
            <h3>{글}</h3>
            <p>2월 17일 발행</p>
            <hr />
          </div>
        );
      })}

array안에 있는 데이터들이 잘 출력이 된 것을 확인할 수 있다!

map함수로 짧게 html 코드를 짤 수 있게 되었다!

만약 map()함수 말고 그냥 for문을 쓰고 싶을땐❓

보통 함수안에서 사용한다.

function 반복된UI(){
  var 어레이 = [];
  for(var i=0;i<3;i++){
    어레이.push(<div>안녕</div>)
  }
  return 어레이
}

{
반복된UI()
}

Props

이때, 그냥 모달 컴포넌트에 {글제목[0]} 이렇게 쓰면 에러가 난다. 정의 되지 않다고 에러가뜸

이유는 글제목은 function app 안에 있고,

내가 사용하고 싶은 글제목을 function modal 에 넣고싶다!

위 그림과 같이 Modal은 자식 컴포넌트가 된다.

따라서 부모 컴포넌트는 자식 컴포넌트한테 글제목이라는 데이터를 전송해 줘야 한다.

props문법을 사용해서 전송해줘야 state 사용 가능!

전송 방법

<자식컴포넌트 작명={state명}/> //이런식으로

{modal == true ? <Modal **글제목={글제목}** /> : modal == null}

자식 컴포넌트에서 pros 파라미터 입력 후 사용

function Modal(**props**) {
  return (
    <div className="modal">
      <h2>{**props.글제목[0]**}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

예제 ) 제목을 누를 때 각각 다른 모달창이 뜨게 만들어보자!

hint? 내가 누른 제목에 번호를 state로 저장한다.

state에 따라서 ui가 변경되도록 만들다.

UI만드는 법칙?
- UI와 관련된 중요 정보들을 state로 저장!
- satate에 따라서 UI가 수정되게 만든다!

0번째 버튼을 누르면 누른제목 state가 0

1번째 버튼을 누르면 누른제목 state가 1

2번째 버튼을 누르면 누른제목 state가 2

<button
onClick={() => {
누른제목변경(0);
}}
>
버튼1
</button>
<button
onClick={() => {
누른제목변경(1);
}}
>
버튼2{" "}
</button>
<button
onClick={() => {
누른제목변경(2);
}}
>
버튼3
</button>

function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.글제목[props.누른제목]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

이 결과 버튼이 누르면 모달창 제목이 바뀌게됨!

그렇다면 버튼 말고 글 제목을 누르면 모달창 제목이 바뀌게 할 수 없을까❓

위에 클릭시 누른제목변경함수는 그대로 이용하면 된다.

대신 map함수에서 두번째 파라미터를 입력하면 이것은 맵 반복문이 돌때마다 1씩 증가하는 변수이다

{글제목.map((글, **i**) => {
        return (
          <div className="list">
            <h3
              onClick={() => {
                누른제목변경(i);
              }}
            >
              {글}
            </h3>
            <span
              onClick={() => {
                따봉변경(좋아요 + 1);
              }}
            >
              👍
            </span>
            {좋아요}
            <p>2월 17일 발행</p>
            <hr />
          </div>
        );
      })}

예제 ) 따봉👍 버튼 함수를 맵함수에 넣어도 될까?

답: 된다!

근데 문제발생

따봉을 누르면 모든 따봉이 같이 올라가게 된다. 이유는 똑같은 값을 다 공유하고 있기 때문

이 문제에 대한 해결 핵심은 글이 세개니까 따봉갯수도 세개가 필요하다.

내가 짠 코드 → 근데 오류 발생?😥

let [좋아요, 따봉변경] = useState([0, 0, 0]);

{글제목.map((글, i) => {
        return (
          <div className="list">
            <h3
              onClick={() => {
                누른제목변경(i);
              }}
            >
              {글}
            </h3>
            <span
              onClick={() => {
                따봉변경(좋아요[i] + 1);
              }}
            >
              👍
            </span>
            {좋아요[i]}
            <p>2월 17일 발행</p>
            <hr />
          </div>
        );
      })}

내가 생각한 알고리즘은 첫번째 따봉버튼을 누르면 좋아요[0]+1, 두번째 따봉버튼을 누르면 좋아요[1]+1, 세번째 따봉버튼을 누르면 좋아요[2]+1 이렇게 증가되고, 좋아요[i]을 보여주는 상황을 상상했다.

그런데 이런,, 오류 발생!

클릭하면 숫자가 사라진다.

😥😓😭 뭐가 잘못된거지

'Front-end > React' 카테고리의 다른 글

[React] 코딩애플 blog -6 (0)	2021.12.09
[React] 코딩애플 blog -5 (0)	2021.12.09
[React] 코딩애플 blog -3 (0)	2021.12.05
[React] Virtual DOM (0)	2021.12.05
[React] 코딩애플 blog -2 (0)	2021.12.05

map() 함수

Props

'Front-end > React' 카테고리의 다른 글

검색 태그

티스토리툴바