[ReactJS] 왜 React JS를 쓰는가? (5) : JSX, Babel -컴포넌트를 다른 컴포넌트 안에 넣기

const container = React.createElement("div", null, [Title, Button]);

    ReactDOM.render(container, root);

이전에 작성한 부분에서의 createElement 부분을 JSX 방식으로 수정해주고 싶다.

arrow function으로 간단하게 변환해 주었다. arrow function 은 return을 적어준 일반 function과 같음을 알자

 

이렇게 적어주는것과 동일하다.

함수로 만들었으니깐 JS 때 처럼 저렇게 (), 소괄호를 쳐주고 싶다는 생각이 들지만

 

 

JSX 규칙에서는 HTML 태그 처럼 활용해주면 된다.

img 태그 였다면

<img/> 라고 써줬을 것처럼 말이다.

 

컴포넌트의 첫번째 글자는 대문자여야 한다!

소문자라면 react 와 JS는 HTML 태그라고 생각할 것이다.

 

<button> : react 와 JS는 HTML 태그라고 생각한다.<Button> : react 와 JS는 컴포넌트로 인식한다.

 

 

직접 만든 요소는 다 첫번째 글자를 대문자로 써주어야 한다.

 

이렇게 함으로써 여러 컴포넌트들이 합쳐진 구성을 만들고 있는 것이다.

 

div 태그를 랜더링하고 있는 컴포넌트가 있는데, Title에 관련된 코드를 포함 시키고 있는거다.

이렇게 컴포넌트로 만듦으로써 원하는 만큼 원하는 곳에 반복적으로 손쉽게 사용할 수 있는 것이다!

의미적으로 Title 태그를 통해 위에서 작성한 코드를 그대로 가져와 넣어준 것과 동일하다.

 

함수로 정의해서 넣어준 것의 브라우저에서 랜더링 된 결과를 보면 

결국 온통 createElement 된것을 알 수 있다.

JSX로 작성하는 편이 이해가 쉽기 때문에 JSX로 적어주면 된다.

 

궁금증이 생겼다.

arrow function 을 적을때

vanilla JS 에서는 () => {} 였는데

JSX 에서는 () => () 이다. 안그러면 오류가 난다.

뭐지 하고 있었는데 

 

 

Container 도 arrow function형식으로 함수로 만들어주고 render 안에 형식을 JSX로 바꾸어 주자.

 

 

 

 

https://nomadcoders.co/react-for-beginners/lectures/3264

All Courses – 노마드 코더 Nomad Coders