[React] JSX

HTML에서 사용한 문법과 비슷한 문법으로 React 요소를 create 해준다.

 

    const h3 = React.createElement(
        "h3",
        {
            id: "good",
            onMouseEnter: () => console.log("mouse enter")
        },
        "HELLO I'M A SPAN");

이렇게 바닐라 js로 요소를 만들어준걸 JSX 문법으로 만들면 

 
const Title = <h3 id="title" onMouseEnter={() =>
        console.log("moueEnter")}>Hello I'm a Ttile</h3>

props에는 id라던지 , eventListener 등등을 넣어준다.

 

이 상태에서 F5 누르면 에러가 뜬다. JSX 문법을 브라우저가 이해할 수 있게 번역하는 과정이 필요한데

걔가 바로 바벨이다!

이제 Container도 바꿔줄건데 이 Container는 함수로 만들어볼거다.

 

HTML 처럼 Title과 Button 태그를 렌더링한다고 생각하면 된다. 

주의할 것은 컴포넌트의 첫글자는 대문자여야 한다! 

HTML 요소는 소문자로 적어주지만 내가 생성한 요소는 대문자로 적어줘야 한다!

 

이렇게 컴포넌트를 렌더링 하기 위해서는 Title과 Button 모두 컴포넌트로 만들어줘야하는데 이것은 자바스크립트의

함수 만드는거랑 모양이 똑같다.

 

둘다 화살표 함수로 구현했다. 

 

++) 화살표 함수에서는 소괄호를 쓰고 일반 함수에서는 중괄호를 쓰는 이유

소괄호는 return을 했다는 전제하에 쓰는 것이고 중괄호는 return을 하지 않았다는 전제하에 쓴다.