React 공부 로그 - return의 소괄호`()` 지우기.

1. return의 소괄호() 지우기.

노마드코더의 영화앱 만들기 리팩토링과정중, 그땐 무심히 넘어갔었던 듯 하지만 app.js에서 return문을 감싸주고있는 () 를 지우라고 하는 지시가 있었다. 소괄호는 지워도 되는것인가 ? 나는 종종 리액트를 다루며 종종 당연하게 소괄호를 썼던 기억이 난다.

이유 1. JSX문법에서 return문을 사용할때 바로 그뒤 소괄호를 이용해 감싸줘야 하는 규칙이 있다.

-공식문서에 나오는 예제코드나 다른 검색내용에 이런 규칙이 있다고 명시되어있다고 한다. 블로그글, 사실 명확하진 않다고함.

자바스크립트 return문에 '()' 을 사용하는 이유는 무엇입니까? 의 글 내용 결론에 의하면 자바스크립트는 return문 뒤에 항상 세미콜론';' 을 자동으로 삽입한다고 한다.

(예시)

return (
    ...
) // <-- JavaScript inserts semicolon here

이유 2. 그렇다면 소괄호를 안쓸 수 있는가 ?

물론, JSX에서의 반환값을 인식하기 위해서는 최상위 엘리먼트 를 바로 적으면 소괄호를 빼도 된다. JSX에서 무엇을 반환해야하는지 인식하기 때문이다. 하지만 소괄호를 적지않는 상태로 최상위 엘리먼트를 return행 바로 다음에 넣는다면 코드 자체에는 오류가 발생하지않지만 VS Code에서는 접근할 수 없는 코드라고 메세지가 뜬다. 그리고 렌더링을 하였지만 내용은 공백 , 즉 return값이 아무것도 없다는 말이 된다.

(예시)

return 
     <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer />
    </section>
  ;

결론

React 에서 return문 사용시 return뒤에 반환할 값을 바로 적는다면 여러 엘리먼트가 있어도 정상작동한다. 그러나 return 다음행에 엘리먼트들을 작성한다면 반드시 소괄호'()' 를 기재하여 반환할 값을 묶어줘야 한다.

출처 : 잡스러운 코딩, 잡코딩