12일차 (React 컴포넌트 중복 제거)

Map

function App() {
  const testArr = ["감자", "고구마", "오이", "가지", "옥수수"];
  return (
    <div className="App">
      {testArr.map(function (item) {
        return <div className="component-style">{item}</div>;
      })}
    </div>
  );
}

 반복되는 컴포넌트를 Map 함수를 사용해서 짧게 표현할 수 있다. 방법은 먼저 배열을 만든 뒤, return문 안에 반복되는 컴포넌트를 Map 함수를 사용해서 나타내는 방법이다.

 

filter

function App() {
  const testArr = ["감자", "고구마", "오이", "가지", "옥수수"];
  return (
    <div className="App">
     {testArr.filter((item) => {
     	return item !== "오이";
     }).map((item) => {
          return <div className="component-style">{item}</div>;
        })}
    </div>
  );
}

 filter 함수를 사용해서 특정 값들만 출력하는 컴포넌트를 만들 수도 있다. 방식은 Map 함수와 같으나, filter 함수를 사용할 때 주의할 점은 filter 함수 사용 이후 Map 함수를 사용해서 다시 한번 정렬을 해줘야 한다.

 

띄어쓰기: &nbsp