[React/RN] map 함수 안에서의 return문 사용법

개발을 처음 배울 시절, 궁금했던 것들을 하나하나 메모하면서 나중에 블로그 글로 하나씩 적어야겠다고 생각했는데 벌써 어언 1년이 지나서 이제서야 글로 옮긴다.

JS 문법에도 익숙지 않아서 map 함수를 보면 지레 겁을 먹었던 적도 있었는데 이제는 이런 함수의 존재가 너무나도 고맙다.

항상 사용할 때마다 return문을 꼭 써야하는 것인지 궁금했었는데 오늘 그 이야기를 하고자한다.

답을 먼저 말하면 그렇지 않다이다.

map 함수 안에서 return 문의 유무를 결정하는 기준은 화살표(=>) 뒤에 중괄호를 쓰냐 소괄호를 쓰냐에 따라 갈리게 되는데 일반적으로 소괄호를 쓰는 형태는 다음과 같다.

data.map((value, key)=>(<View key={key}>[컴포넌트]</View>))

더 나아가 소괄호가 생략되는 경우도 많고 이는 코드가 훨씬 깔끔해 보이는 장점을 가진다.

반대로 중괄호를 쓰게 되면 아래와 같이 꼭 return문을 넣어주어야 한다.

data.map((value, key)=>{
  const newValue = ... // 새 변수 정의
  return(
    <View key={key}>
      <Text>
        {newValue}
      </Text>
    </View>
  );
})

return을 쓰면 필연적으로 코드가 길어지게 되므로 항상 소괄호를 쓰는게 나아보일 수 있는데, 단 중괄호를 썼을 때 생기는 중요한 이점이 하나 존재한다.

바로 map 함수 내부에서 새로운 변수를 정의할 수 있다는 것이다. 이는 코드의 중복을 막아 가독성을 좋게 하는데 매우 중요할 수 있다.

하지만 그 뿐이므로 새로운 변수를 정의하는 경우를 제외한다면 return문은 과감히 생략해주자.