react에서의 반복문

react의 jsx에서는 if문처럼 for문 역시도 중괄호 안에 쓸 수 없다.

react에서는 map()을 쓰면 된다.

 

ES6 문법 중 map 메소드를 보자.

  let array = [2, 3, 4];
  // array 내에 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 .map()을 쓴다.

  let newArray = array.map(function (a) {
    return a * 2
  });
  // 또다른 array가 생성된다. [4, 6, 8]
  // a 라는 파라미터: array 안의 하나하나의 데이터, map~는 a에서 꺼내 하나하나 반복문이 돈다.

 

이를 이용하여 유사반복문을 만들어보자

 

  let [title, changeTitle] = useState([
    "오늘 한 일",
    "내일 할 일",
    "모레 할 일",
  ]);
  
          {title.map(function (title) {
          return (
            <ul>
              <li>
                <h3>
                  {title}
                  <button onClick={changeTitleFunction}>바뀌는 제목</button>
                  <span
                    onClick={() => {
                      change(good + 1);
                    }}
                  >
                    {" "}
                    👍
                  </span>
                  {good}
                </h3>
              </li>
              <li>
                <p>2월 17일 발행</p>
                <hr />
              </li>
            </ul>
          );
        })}

title에 map 메소드를 써서 반복시키고자 하는 HTML을 리턴할 수 있다. 매개변수를 적절히 사용하면 title 부분도 알아서 반복된 숫자에 맞게 제목이 들어간다.

 

정석적인 for 반복문을 쓰고자 한다면 return 바깥에 함수를 하나 만들어주어서 다루어야 한다.

 

  function anotherReaf() {
    let array2 = [];
    for (let i = 0; i < 3; i++) {
      array2.push(<div>안녕</div>);
    }
    return array2;
  }

array를 하나 만들어서 push 해주는 방식이다.

 

return(
	...
  {anotherReaf()}
  	...
);

역시나 리턴 안에서 중괄호를 써서 바깥에서 만든 함수를 적용해주면 반복된다.