JSX(JavaScript XML) Component

 

JSX(JavaScript XML)
React와 함께 사용되는 JavaScript의 확장 문법

 

 

 

JSX는 React 애플리케이션을 빌드할 때 주로 사용되며

JSX로 작성한 코드는 Babel과 같은 도구를 사용하여 JavaScript 문법으로 변환해야한다.

첫글자는 대문자로 ! 
중괄호 {}를 사용하여 JavaScript 표현식을 JSX에 포함할 수 있음
하나의 부모요소안에 여러 태그를 묶어 return함
<></> 또는 <React.Fragment>를 사용하여 여러 요소를 묶는 방법도 있음

 

아래는 JSX로 컴포넌트를 만들어서 사용하는 예시이다

function HelloWorld() {
  return <div>Hello, World!</div>;
}

const HelloWorld = () => (
  <div>Hello, World!</div>;
)

 

컴포넌트를 만들어서 재사용도 얼마든지 가능하다

function HiDiv() {
    return (
        <>
            <div>안녕</div>
        </>
    )
}

const App =  (
    <>
        <HiDiv />
        <HiDiv />
        <HiDiv />
    </>

);

ReactDOM.render(<App />, root);