- 리액트 사용할때 return 뒤에 ()를 쓰는데 어쩔때는 ()를 써야하고 어쩔때는 ()필요없이 작동할때가 있었다. return 뒤에 ();은 왜 써준걸까?
👉 return 문 뒤에 소괄호()를 넣는 이유는 어떤 요소를 반환하는지에 대한 가독성을 높이기 위함이라고 한다.
그리고 JSX에서 return문 뒤에 소괄호()를 넣는 용법이 있다.
(참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?(Why Use Parenthesis [sic] on JavaScript Return Statements?)”, http://jamesknelson.com/javascript-return-parenthesis.)
그렇기 때문에 return 문 뒤의 최상위 엘리먼트를 바로 적으면 소괄호를 빼도 된다.
JSX에서 반환해야 하는 값이 무엇인지 인식하기 때문이다. (return 문 뒤에 한 줄 있다면 생략 가능, 두 줄이상이라면 필수로 기재라는 코스의 답변은 엄밀히 따지면 올바르지 않다. 왜냐하면 return 문 뒤에만 바로 적는다면 여러 엘리먼트를 기재해도 JSX는 인식하기 때문이다.) 아래 코드는 return 문 뒤에 소괄호 없어도 정상적으로 작동한다.
그런데 소괄호를 적지 않은 상태에서 최상위 엘리먼트를 return 다음 행에 기재하면 코드 자체에 는 오류가 발생하지는 않지만 VS code에서는 접근할 수 없는 코드라고 메세지가 뜬다. 그리고 화면은 랜더링을 하였지만 내용이 공백이다. 즉 return 값이 아무것도 없다는 말이다.
정리를 하자면!
React에서 return 문 사용시 return 뒤에 반환할 값을 바로 적는 다면 여러 엘리먼트가 있어도 정상작동한다.
그러나 return 다음 행에 엘리먼트들을 작성한다면 반드시 소괄호를 기재하여 반환할 값을 묶어주어야 한다.
