React에서 map()함수 사용시 return 문의 필요성

리액트에서 JSX 코드의 반복 요소를 수정할 때, map()함수를 자주 사용합니다.

map() 함수를 사용하여 반복되는 JSX요소를 반환하는 경우가 많이 발생합니다.

 

return 키워드를 사용하여 반환하는 방식과,

간결한 화살표 함수의 단축 구문을 사용하는 방식 두 가지가 있습니다.

결과적으로는 동일한 결과물입니다. 하지만 조금 다른 차이점이 있습니다. 

 

1. return을 사용할때

 

- return 키워드를 사용하는 경우, 명시적으로 return 문을 사용하여 생성된 각 JSX 요소를 새 배열에 저장하고,

이 배열은 나중에 렌더링될 수 있도록 합니다.

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((number) => {
        return <li key={number}>{number}</li>;
      })}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById("root"));

 

 

2. return을 사용하지 않을때

 

- return 키워드를 생략하고 화살표 함수의 단축 구문을 사용하는 경우,

중괄호를 생략한 표현식을 사용하여 값을 반환합니다.

중괄호를 사용하면서 return 키워드를 생략하는 경우,  함수는 값을 반환하지 않고 기본적으로 undefined를 반환합니다.

 

////화살표함수를 사용하여 return문을 생략한 코드//

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById("root"));

 

 

이렇게 map() 함수에서 return을 생략하면 코드가 더 간결해지고 가독성이 좋아지며, 성능도 향상될 수 있습니다.

하지만 map() 함수에서 return 문을 생략하면 새로운 배열을 생성하지 않고, 원본 배열을 직접 수정합니다.

즉, 원본 배열이 참조되는 다른 코드에서도 수정된 배열이 사용됩니다.

 

만약 return 문을 살려두고 값을 반환하면, 그 반환된 값을 통해 새로운 배열을 생성하고 원본 배열은 변경되지 않습니다. 새로운 배열을 참조하는 코드에서만 변경된 값을 사용할 수 있습니다.

 

만약 return 문을 생략하는 것이 코드 간결성과 가독성을 향상시키는데 도움이 된다면,

해당 코드가 배열의 원본을 변경하지 않는지 항상 확인해야 합니다.