react - component - JSX

JSX 01

ReactElement를 정의하는 간편한 방법으로 JSX 문법을 제공한다.
자바스크립트를 확장한 문법으로 ReactElement를 xml 문법 형식으로 정의할 수 있는 방법이다.
JSX는 공식적인 자바스크립트 문법이 아니어서 바벨이라는 트랜스 컴파일링 툴이 필요하다.
바벨은 ES6 + ES6 next 문법을 ES5 문법으로 변환해주는 도구인데 JSX를 순수 리액트로 변환해주는 기능도 포함하고 있다.(바벨이 JSX 처리 표준이다.)

바벨을 사용하기
1. CDN 삽입
2. script 태그의 type 속성 추가

//CDN
<script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>

// type 속성 추가
<script type="text/babel">
        const helloworld = <h1>Hellow Wolrd!</h1>;
        
        ReactDOM.createRoot(document.getElementById('root')).render(helloworld);


</script>

JSX 02 expression

JSX 문법 내에 중괄호를 이용하여 모든 javascript 표현식(문법)을 넣을 수 있다.

<div id="root"></div>
    
    <script type="text/babel">

        function formatName(user){

            return `${user.lastName} ${user.firstName}`;
        }

        const user = {
            firstName : 'Gildong',
            lastName : 'Hong'
        };

        /* JSX 문법 내에 중괄호를 이용 */
        const element = <h1>Hello, { formatName(user) }</h1>;

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


    </script>
    
    // 출력 : Hello, Hong Gildong

JSX 03 fragment

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의 축약 문법인 < >< / >로 감싸서 사용할 수 있다. (Bable17 이상부터 지원)

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

        );

attribute

01_attribute

JSX는 HTML 태그처럼 보이지만 실제로는 자바스크립트이다.
(React.createElement를 호출하는 코드로 컴파일된다.)
따라서 자바스크립트의 예약어와 동일한 이름의 attribute는 다른 이름으로 우회적으로 사용하도록 정의되어있다.

1. 문자열로 속성 값 정의하는 방법

// test를 위한 style 정의
<style>
        .highlight{

            background-color: red;
        }
</style>
    
const element = <h1 id="title" className="highlight">Hello World!</h1>;

2. 자바스크립트 표현식을 이용한 방법

const id = "title";
        const className = "highlight";

        const element = <h1 id={id} className={className}>Hello World</h1>

02. inline-style-attribute

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

const style = {
            backgroundColor : 'black',
            color : 'white',
            cursor : 'pointer',
            textAlign : 'center',
            padding : 20
            // 단위를 작성하려면 문자열로 사용하지만(20 -> '20px') 단위를 생략하면 숫자만 사용 가능
        }
        
        
const element = (
            <>
                <h1 style={style}>Hello World</h1>
                <h3>inline styling test</h3>
            </>

        );        

03. event-attribute

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

        const element = (
            <>
                <h1>Event attribute</h1>
                <button onClick={ () => alert('Hello World')}>클릭하세요</button>
            </>

        );

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

const onClickHandler = () => {
            alert('hello world!');
        };

        const element = (
            <>
                <h1>Event attribute</h1>
                <button onClick={ onClickHandler }>클릭하세요</button>
            </>

        );

04. comment-in-JSX

 const element = (
            <>
                <h1>Comment in JSX</h1>
                {/* JSX 내에서 주석은 이렇게 작성합니다. */}
                <h3
                    id="text"           // 시작 태그를 여러줄로 작성한다면 여깅도 주석 작성 가능
                    className="text"
                >
                </h3>

                /* 하지만 이런 주석이나*/
                // 이런주석은 페이지에 그대로 나타나게 됩니다.
            </>

        );