3. JSX

3. JSX

React.createElement()를 계속 작성하는 노가다를 해결

3.1 JSX의 정의와 장점

자바 스크립트의 확장

React.createElement() 호출 반복 해소

React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와줌.

[ 장점 ]

• 개발자 경험 개선 ; 중첩된 선언형 구조를 더 잘 나타냄
• 팀의 생산성 향상
• 문법 오류와 코드량 감소

ex) non JSX

React.createElement(
    "div",
    null,
    React.createElement(HelloWorld, null),
    React.createElement("br", null),
    React.createElement("a", { href: "http://webapplog.com" }, "Great JS Resource")
)

ex) use JSX

<div>
    <HelloWorld/>
    <br/>
    <a href="http://webapplog.com">Great JS Resources</a>
</div>

3.2 JSX의 이해

3.2.1 JSX로 React 엘리먼트 생성하기

ex) non JSX

React.createElement(
    name,
    {key1: vlaue1, key2: value2, ...},
    child1, child2, child3, ... , childN
)

ex) use JSX

<name key1=value1 key2=value2 ...>
    <child1/>
    <child2/>
    ...
    <childN/>
</name>

3.2.2 React 컴포넌트에 JSX 사용하기

컴포넌트 클래스의 이름은 반드시 대문자!

ex) 컴포넌트 클래스 이용 JSX

class HelloWorld extends React.Component {
    render() {
        return (
            <div>
                <h1>1. Hello World</h1>
                <h1>2. Hello World</h2>
            </div>
        )
    }
}

ReactDOM.render(
    <HelloWorld/>,
    document.getElementById('content')
)

3.2.3 JSX에서 변수 출력하기

템플릿 리터럴(template literal) 사용

ex) non use JSX

class DateTimeNow extends React.Component {
    render() {
        let dateTimeNow = new Date().toLocaleString()
        return React.createElement(
            'span',
            null,
            `Current date and tme is ${dateTimeNow}.`
        )
    }
}

ex) use JSX

class DateTimeNow extends react.Component {
    render() {
        let dateTimeNow = new Date(0.toLocaleString(0
        return <span>Current date and time is {dateTimeNow}. </span>
    }
}

3.2.4 JSX에서 속성 사용하기

ex) 동적 컴포넌트

class ProfileLink extends React.Component {
    render() {
        return <a href={this.props.url}
        title={this.props.label}
        target="_blank"> Profile
        </a>
    }
}

ex) 모든 속성 전달하기

class HelloWorld extends React.Component {
    render() {
        return <h1 {...this.props}> Hello {this.props.frameworkName} world!! </h1>
    }
}

3.2.5 React 컴포넌트 메서드 생성하기

ex) 컴포넌트에서 메서드 호출하기

class Content extends React.Component {
    getUrl() {
        return '~~~'
    }
    render() {
        return (
            <div>
                <p>Your URL is : <a href={this.getUrl()}>{this.getUrl()}</a></p>
            </div>
        )
    }
}

3.2.6 JSX의 if/else 처리

ex) non JSX

render() {
    if(user.session)
        return React.createElement('a', {href: '/logout'}, 'Logout')
    else
        return React.createElement('a', {href: '/login'}, 'Login')
}

ex) JSX use

render() {
    if(this.props.user.session)
        return <a href="/logout">Logout</a>
    else
        return <a href="/login">Login</a>
}

3.2.7 JSX의 주석 작성 방법

{} 로 감싸서 자바스크립트 주석 /* */를 활용한다.

3.3 Babel을 이용한 JSX 트랜스파일러 설정하기

JSX를 실행하기 위해 자바스크립트로 코드로 변환 필요.

컴파일과 변환을 거친다고 하여 트랜스파일레이션(transpilation)이라고 함.
JSX를 실행하기 위한 방법으로 Typescript도 있음. (jsx -> tsx, js -> tx)

3.4 React와 JSX의 까다로운 부분

JSX는 자식 엘리먼트가 없거나 단일 태그를 사용할 때 반드시 슬래시(/)를 넣어야 함.

3.4.1 특수문자

ex) 정상 작동

<span>&copy;&mdash;&ldquo;</span>

ex) 오류

var specialChars = '©—“'
<span>{specialChars},/span>

특수문자를 활용하는 다양한 방법이 있긴 있다.

그 중 재밌는 방법으로 dangerouslySetInnerHTML 이라는 속성이 있다

다른 재밌는 키워드로 SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 도 있다.

(숨겨진 부분이니 사용하지 마세요. 그렇지 않으면 해고 당함 ㅋㅋ)

3.4.2 data- 속성

3.4.3 스타일 속성

3.4.4 class와 for 속성

javascript와 ECMAScript의 예약어 이므로 class와 for 대신 각각 className과 htmlFor를 사용

3.4.5 불 값을 속성으로 사용하는 경우

disabled, required, checked 등 폼 요소에만 사용하는 값은 {}안에 문자열로 입력하지 않는다.

ex) input 요소 사용 설정

<input disabled={false} />

ex) 속성 값 생략 시 React는 true로 간주

<input disabled />

요약

• JSX는 그저 createElement 같은, React 메서드를 위한 문법적 개선이다.
• JSX에서는 표준 HTML 속성인 class와 for 대신 className과 htmlFor를 사용한다.
• JSX에서 스타일(style) 속성을 입력할 때는 HTML처럼 문자열을 사용하지 않고 자바스크립트 객체를 전달한다.
• 삼항 연산자와 즉시 실행 함수는 JSX에서 if/else 문을 처리하는 좋은 방법이다.
• 변수, 주석, HTML 엔터티 코드를 출력하고, JSX 코드를 네이티브 자바스크립트 코드로 변경하는 것은 쉽다.
• JSX를 자바스크립트로 변환하는 방법이 몇 가지 있다.
  Babel CLI를 이용한 컴파일 방법은 Gulp, Webpack 같은 도구를 사용하여 빌드 설정을 하거나,
  Node.js 또는 자바스크립트로 Babel API를 직접 이용한 스크립트를 작성하는 방법에 비해
  설정해야 할 부분이 적다.