Component-JSX

2-1. JSX Intro

1. JSX

• CreateElement를 이용해 엘리먼트를 정의하면 복잡하고 가독성이 떨어짐
• 리액트 팀은 ReactElement를 정의하는 간편한 방법으로 JSX 문법 제공
• 자바 스크립트를 확장한 문법으로 ReacElement를 XML 문법 형식으로 정의할 수 있는 방법
• 바벨이라는 트랜스 컴파일링 툴 필요
• 바벨
  • ES6, ES6+를 ES5 문법으로 변환해주는 도구
  • JSX를 순수 리액트로 변환해주는 기능 포함

<script type="text/babel"></script>

2. JSX 표현

<div id="root"></div>

    <script type="text/babel">
         function formatName(user){
            return `${user.lastName} ${user.firstName}`;
         }

         const user = {
            firstName : 'Gildong',
            lastName : 'Hong'
         };
         
         /* JSX 문법 내에 중괄호를 이용하여 모든 javascript 표현식(문법)을 넣을 수 있다. */
         const element = <h1> Hello, {formatName(user)}</h1>;

         ReactDOM.createRoot(document.getElementById('root')).render(element);

    </script>

3. Fragment

 <div id="root"></div>

    <script type="text/babel">
        
        const user ={
            name: 'Gildong',
            phone : '010-1234-5678'
        };

        /* 1. 최상위 엘리먼트가 두 개 이상이면 에러 발생(하나의 돔 트리만 생성해야 함) */
         const element = (
             <h1>Hello, {user.name}</h1>
             <h3>phone : {user.phone}</h3>
         );

        /* 2. <div> 태그로 감싸서 하나의 돔 트리를 생성할 수 있도록 한다. */
         const element = (
             <div>
                 <h1>Hello, {user.name}</h1>
                 <h3>phone : {user.phone}</h3>
             </div>
         );

        /* 3. <React.Fragment>로 감싸서 형식상의 돔 트리상 상위 엘리먼트를 만들어 준다. */
             const element = (
                 <React.Fragment>
                     <h1>Hello, {user.name}</h1>
                     <h3>phone : {user.phone}</h3>
                 </React.Fragment>
         );

        /* 4. React 라이브러리로부터 Fragment 객체만 구조분해할당 해주면 React. 생략 가능하다. */
         const {Fragment} = React;

         const element = (
             <Fragment>
                 <h1>Hello, {user.name}</h1>
                 <h3>phone : {user.phone}</h3>
             </Fragment>
         );

        /* 5. React.Fragment의 축약 문법인 <></>로 감싸서 사용할 수 있다. 
        (Babel 17 이상부터 지원) */
        const element = (
            <>
                <h1>Hello, {user.name}</h1>
                <h3>phone : {user.phone}</h3>
            </>
        )

        ReactDOM.createRoot(document.getElementById('root')).render(element);

    </script>

4. Attribute

• JSX는 HTML 태그처럼 보이지만 사실은 자바스크립트(React.createElement를 호출하는 코드로 컴파일 됨)
• 따라서 자바스크립트의 예약어와 동일한 이름의 attribute는 다른 이름으로 우회적 사용
• 문자열의 속성 값 정의하는 방법

<script type="text/babel">
  const element = <h1 id="title" className="highLight">Hello World</h1>
</script>

• 자바스크립트 표현식을 이용하는 방법

<script type="text/babel">
  const id='title';
  const className = 'highlight';
  
  const element = <h1 id={id} className={className}>Hello World!</h1>
  ReactDOM.createRoot(document.getElementById('root')).render(element);\
</script>

5. Inline Style Attribute

• style 속성은 객체 형태의 attribute를 추가해야 한다
• 객체의 속성명은 카멜 케이스로 작성
• 속성 값은 문자열 혹은 숫자 형태로 작성

<script type="text/babel">
  const style={
  	backgroundColor : 'orange',
  	color : 'white',
  	cursur : 'pointer',
  	textAlign : 'center',
  	padding : '20px'
  	//단위를 작성하려면 문자열로 사용하지만 단위를 생략하면 숫자만 사용 가능
  };
  
  const element = {
  <>
  <h1 style={style}>Hello World!</h1>
  </>
 );
  ReactDOM.createRoot(document.getElementById('root')).render(element);

6. Event Attribute

• 인라인으로 간단한 이벤트 적용 시 JSX의 자바스크립트 표현식 내에 이벤트 처리 함수 작성 가능

<script>
  const element = (
  	<>
  <h1>Event Attribute</h1>
  <button onClick={ () => alert('Hello World')}>클릭</button>
  </>

• 이벤트 동작 시 사용할 핸들러 메소드 사전 정의 후 JSX 내에 표현식으로 사용

const onClickHandler = () => {alert('Hello World!');};

const element = (
  <>
  	<h1>Event Attribute</h1>
  	<button onClick = {onClickHandler }>클릭</button>
);

7. 주석

{/* JSX 내에서의 주석 작성 */}
<h3 //주석 작성 가능>
/**/ // 이런 주석은 페이지에 그대로 나타남