[React] React 에서 반복문 활용하기

💡 실습 포인트!

• 이때까지의 실습에서는 위와 같이 게시글 리스트를 브라우저에 나타내기 위해 list 라는 className 을 가진 div 태그들을 각각 하드코딩을 했었다.
• 하지만 데이터의 양이 늘어날수록 하드코딩을 하기도 힘들거니와 파일 내의 코드가 너무 길어져 가독성이 떨어진다.
• 따라서, 반복문을 활용하여 코드의 길이를 줄이고 확장성을 더해주었다.

---

💜 map() 함수 활용하기

• React 에서는 중괄호를 활용하는 JSX 문법을 사용하는데, 중괄호 안에는 변수와 함수만 들어갈 수 있기 때문에 for 문을 직접적으로 넣어서 사용할 수 없다.
• 하지만, array 자료형에 붙일 수 있는 map() 이라는 내장함수를 활용하면 반복문을 사용한 것과 같은 효과를 줄 수 있다.

🤍 map() 함수 알아보기

• map() 함수는 모든 array 자료형에 붙일 수 있으며, 소괄호 안헤 콜백함수를 넣는 게 기본 구성이다.
• 그러면 map 안의 코드가 array 자료형의 자료들 하나하나에 적용 및 실행된다.
  (따라서, 코드는 array 자료형의 자료 개수만큼 반복하여 실행된다.)

let array = [1, 2, 3, 4];

array.map(function(i){
  // 반복하여 실행할 코드
  return i * 10
});

• 콜백함수의 소괄호 안에 아무 이름이나 정해서 파라미터로 넣어주면, 해당 파라미터가 array 안에 있던 모든 자료들을 하나씩 출력해준다. (나는 파라미터 이름을 i 로 정해주었다.)
• 그러면 그 출력된 자료 하나하나에 코드가 적용 및 실행된다. (나는 * 10 을 하라고 작성하였다.)
• array 안의 모든 자료 개수만큼 코드가 실행되고 나면 각각 10씩 곱해져서 array 는 [10, 20, 30, 40] 이 된다.

let array = [1, 2, 3, 4];

let newArray = array.map(function(i){
  // 반복하여 실행할 코드
  return i * 10
});

console.log(array); // [1, 2, 3, 4];
console.log(newArray); // [10, 20, 30, 40];

• 주의할 점은 map() 함수가 원본 자료를 변경하는 것이 아니므로 변경된 내용이 적용된 array 자료형을 저장하여 다른 곳에서 사용하고 싶다면 새로운 변수에 담아서 사용해야 한다.

---

🤍 JSX 문법 내에서 반복문처럼 map() 함수 사용하기

function App() {

    let [title, setTitle] = useState([
        '[React] React 설치와 개발환경 셋팅하기', 
        '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
        '[React] React 에서 state 변경해보기'
    ]);

	return (
        <div className="App">
          {
            title.map(function(content){
              return (
              <div className='list'>
                <h3>{content}</h3>
                <p>2022-03-18</p>
                <hr/>
              </div>            
              )
            })
          }
        </div>
  );
}

• Component 의 return 문 안에 있는 태그들을 보고 map() 함수를 사용하여 넣을 태그들이 들어갈 위치를 골라준다.
• 위치를 정했으면 중괄호를 쓴 다음 중괄호 안에 map() 함수를 사용하여 코드를 작성해주면 된다.
• title 이라는 state 는 array 자료형이며, 각 자료를 content 로 꺼내어 h3 태그에 넣어주었다.
  (추천 버튼 부분은 기능이 미완성이라 코드 작성에서는 제외했다.)

---

💜 for 문 활용하기

• map() 함수를 사용하지 않고 for 문을 사용하는 방법도 알아두면 유용하다.
• React 에서 일반적인 for 문을 사용하고 싶다면 따로 함수로 만들어서 써야 하며 방법은 아래와 같다.
  • 따로 일반 함수를 만든다.
  • 함수 안에 태그들을 담을 array 자료형을 하나 추가한다.
  • 함수 안에서 for 문을 이용해 추가한 array 자료형에 태그들을 추가한다.
  • 반복문이 끝나면 완성된 array 를 return 해준다.
  • Component 내의 return 문에 담긴 태그들을 보고 만들어놓은 함수가 들어갈 위치를 골라 { 함수명( ) } 형태로 데이터바인딩을 해서 넣어준다.

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
      '[React] React 에서 state 변경해보기'
  ]);

  function repeatTitle(title) {
    let arr = [];
    for (let i = 0; i < title.length; i++) {
    
      arr.push(
      <div className='list'>
        <h3>{title[i]}</h3>
        <p>2022-03-18</p>
        <hr/>
      </div>
      )
      
    }
    return arr;
  }

  return (
    <div className="App">
      {repeatTitle(title)}
    </div>
  );
}

• 나의 경우 repeatTitle() 이라는 이름의 함수를 만들어주었다.
• 함수 안에는 태그들을 담을 arr 라는 자료형을 추가해주었다.
• 그리고 for 문을 받아온 파라미터의 길이만큼 반복하여 필요한 태그들을 push() 함수를 통해 arr 에 담아주었다.
• h3 태그에는 파라미터로 들어온 배열의 요소들이 파라미터[0], 파라미터[1].. 이런 식으로 순서대로 하나씩 들어가야 하는데 파라미터의 이름이 title 이므로 { title[i] } 로 코드를 작성했다.
• for 문이 끝난 후 arr 를 return 해주면 함수는 끝이 난다.
• 이제 위치를 정해주어야 하는데, 나는 App 이라는 className 을 가진 div 태그 안에 넣어주었다.
• 그리고 repeatTitle() 함수는 title 이라는 state 를 파라미터로 받아올 것이므로 { repeatTitle(title) } 로 코드를 작성해주었다.