return 뒤에 소괄호 여부

JSX 문법에서 return문을 사용할 때 그 뒤에 소괄호를 사용해야 하는 규칙이 있다. (리액트 공식 문서에서는 해당 내용을 확인하지 못하였으나 공식문서에 나오는 예제 코드나 다른 검색 내용들이 그러한 규칙이 있다고 명시한다.)

위의 코드에서 return 문 뒤에 소괄호를 적어 주었다. return 문 뒤에 소괄호를 넣는 이유는 어떤 요소를 반환하는지에 대한 가독성을 높이기 위함이라고 한다. 그리고 JSX에서 return 문 뒤에 소괄호를 넣는 용법이 있다.

const Features = () => {
  return (
     <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer />
    </section>
  );
};

그렇기 때문에 return 문 뒤의 최상위 엘리먼트를 바로 적으면 (아래 코드 처럼) 소괄호를 빼도 된다. JSX에서 반환해야 하는 값이 무엇인지 인식하기 때문이다. (return 문 뒤에 한 줄 있다면 생략 가능, 두 줄이상이라면 필수로 기재라는 코스의 답변은 엄밀히 따지면 올바르지 않다. 왜냐하면 return 문 뒤에만 바로 적는다면 여러 엘리먼트를 기재해도 JSX는 인식하기 때문이다.) 아래 코드는 return 문 뒤에 소괄호 없어도 정상적으로 작동한다.

참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?http://jamesknelson.com/javascript-return-parenthesis.)