[React] 03.JSX

03. JSX

• jsx는 슈가 문법으로 javascript를 확장한 문법이다.

• React에서 javascript로 마크업을 만들고, 시각적으로 좀 더 수월하게 표현하게 해주는 방법이다.

• JSX는 필수는 아니지만, UI 관련 작업을 할 때 도움이 된다.

• JSX는 HTML 태그를 넣을수 있을 뿐만 아니라,

그렇기 때문에, jsx 내부에 jsx를 사용해서 만들 수 있다.

단 jsx를 활용한 태그는 파스칼케이스로 만들것을 권장한다.

그 이유는 첫글자가 대문자가 아니라면, 기존의 HTML 태그로 인식할 수 도 있기 때문이다.

const Paint = ({title, description, children}) => {
    return (
    <>
        <h1>{title}</h1>
        <h3>{children}</h3>
           {children}
    </>
)
}


const element = (
    <>
        <Paint title ="Good" description = "good">
            {Paint({title : "Bad" , description="bad" children="hi"} )}
        </Paint>
    </>
)

이렇듯 jsx 내부에 jsx를 쓸수도 있으며, 더 나아가, javascript 문법을 활용해서 return 된 jsx를 활용해서 만들수 도 있다.