[React 요약 정리] 3. JSX

3. JSX

1) JSX 개요

- JSX: 함수 호출과 객체 생성을 위한 문법적 편의를 제공

- 장점: 뛰어난 표현력, 생산성 향상, 코드량 감소, 문법 오류 감소

2) JSX 사용

- 사용 예시

ReactDOM.render(

React.createElement('h1', null, 'Hello world!'),

document.getElementById('content')

)

↓↓ JSX로 작성시 ↓↓

ReactDOM.render(

<h1>Hello world!</h1>,

document.getElementById('content')

)

- JSX 문법으로 작성한 객체도 변수에 저장 가능

let hw = <h1>Hello world!</h1>

ReactDOM.render(hw, document.getElementById('content'))

3) React 컴포넌트에 JSX 사용

- return과 다른 행에 JSX문장 사용시 소괄호를 추가

- 사용 예시

class HelloWorld extends React.Component{

render() {

return (

<div>

<h1>1. Hello world!</h1>

<h1>2. Hello world!</h1>

</div>

)

}

}

ReactDOM.render(

<HelloWorld/>,

document.getElementById('content')

)

- return 문과 같은 줄에서 문장이 시작되면 소괄호 생략 가능

render() {

return <div>

</div>

}

4) JSX에서 스크립트 코드 사용

- JSX에서는 중괄호{}를 사용해서 스크립트 코드를 사용 가능

*자바스크립트 템플릿 문자열, JSP EL과 유사

render() {

let name = '리액트'

return <div> { name } </div>

}

- 주석 추가시 {/* 주석 */}의 형태로 사용

5) JSX에서 속성 사용

- 태그 내에 속성을 정의해서 사용 가능

- HTML 비표준 속성 사용은 안티 패턴으로 여겨짐(성능 문제)

- 불가피하게 사용해야할 경우 속성명을 data-* 로 정의

<li data-react-is-awesome={this.reactIsAwesome}>React is awesome!</li>

- {...this.props}를 사용하면 모든 속성을 자식 엘리먼트로 전달 가능

render() {

return <h1> {...this.props}>Hello {this.props.frameworkName} world!!</h1>

}

- 컴포넌트 내에 정의된 메소드도 같은 방식으로 호출 가능

{this.메소드명()}

6) JSX에서 조건문 사용

- 일반적인 if문을 사용해도 되지만 삼항연산자를 사용하면 코드가 간결해짐

render() {

let sessionFlag = this.props.user.session

return <div>

<a href={(sessionFlag) ? '/logout' : '/login'}>

{(sessionFlag) ? 'Logout' : 'Login' }

</a>

</div>

}