[TIL] JSX, Udemy 강의

이전 JSX에 관해 작성한 포트스글:

[TIL] XML, JSX, Babel(바벨)

이전에도 JSX가 무엇인지 다뤘는데 뭔가 더 정확히하고싶었고 지금 리액트를 복습중인데 JSX를 반복적으로 언급하고 설명하기때문에 다시한번 간단하게 정리하기로했다.

리액트: https://www.udemy.com/course/best-react/#instructor-2

타입스크립트 : https://www.udemy.com/course/best-typescript-21/

현재 Udemy 를 통해 typescript 강의와 react, 그리고 코딩테스트 강의를 듣고있는데 정말 강추한다. 

일단 강사는 Maximilian 이라는 외국강사인데 약2백만명의 수강생과 74만리뷰, 총 4.7이라는 평점을 가지고있는 어마무시한 사람이다.

들어보면 진짜~~~~ 쏙쏙쏙 잘알려준다고 생각한다. 내가 기존에 알고있는 개념인 react 이라 복습하는데 수월한것도 있지만 타입스크립트은 처음인데도 이강사를 통해 듣는데 시간적 여유가 있다면 정말 강추한다. 강의량이 어마무시하게 많기도하다.. (일주일에 주기적으로 세일하기때문에 원가일땐 사지말기바란다)

 

본론으로 돌아가서 강의내용중에 JSX에 대해서 설명을했고 내가 기존에 작성했던 글과 확실히 겹치면서도 디테일하게 설명해준다고 생각했다.

페이지->검사 가면 소스에서 static/js 같은 폴더에 변형된 js파일들이 있다. -> 왜냐면 여기서는 jsx 코드가 없고 브라우저가 jsx코드는 지원하지 않는다.

즉 우리가 코드를 짤때는 가독성높고 간편한 문법인데 이런 과정에서 변환을 해준다는것이다.

package.json 에 가서 dependencies 를 보면 보이지 않는 곳에서 변환을 다룬다.

다음과같은 JSX를 쓰지않는 경우 이 코드가 어떻게 보일지 보여주면 다음과같다.

 

div 라는 요소를만들고 두번재 인자는 속성값 , 없으므로 빈칸{}, 그리고 자식요소로 h2와 Expenses 컴포넌트가 있으므로 3번째 인자에 h2를 똑같이 생성해주는 코드를 만드러주고4번째 인자에 Expenses 컴포넌트를 넣어준다.이때 기존 내장된 HTML이 아닌 커스텀된 컴포넌트이므로 ‘’ 없이 이름만 써준다. 이때 Expenses는 props를 넘겨주기 때문에 ㅁitems 이라는 이름으로 expenses 라는 데이터를 넘겨주었다. 이렇게하면 JSX 코드가 React 객체로 생성하여 만들었을때의 모습이다.

이렇게하면 똑같이 기존에 작성했던 화면과 동일하게 출력이 되지만 읽기가 좀더 어렵고 작성하기 번거롭다.

 

현재는 React를 import 하지않아도 JSX작성에 대해서 뒤에서 위와같이 변형되어 사용되고 있지만 이를 강조하기위해서(자각하기위해서) JSX문법이 사용되는 파일에 일부로 import를 써놓기도한다.

 

여기서 중요한점!!

여기서 왜 루트 JSX 엘리먼트로 래핑 엘리먼트가 필요한지 알수있다(wrapper root JSX element). Return 에 한개의 div요소태그 나 빈테그 등 하나의 큰 요소태그로 묶은걸로 리턴한다는건 그전에 알수있는데 왜 그렇게만되는지는 알수없었다.

그런데 이제 위에서 보면 알수있듯이 createElement로 div 를 만들고 그아래로 자식요소들을 인자로 받고 생성하는데, 만약 최상위 부모 요소인 루트 래핑엘리먼트가 없고 

동일선상의 요소로만 여러개 이어진다면 return이 하나가 아닌 여러개를 반환하게 되는데 이렇게되면 함수의 return이 여러개생기는거기때문에 js문법적으로도 말이안된다.

이런식으로 반환값이 두개를 써야하는데 에러가발생한다

따라서 wrapper 가 필요한것이다.