티스토리 뷰

React

3. JSX

새로운 도전을 즐기는 모기같은 개발자. 하늘을난모기 2018.12.02 18:21
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 (

1. Hello World

2. Hello World

) } }

ReactDOM.render( , 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 = '&copy;&mdash;&ldquo;' <span>{specialChars},/span>

특수문자를 활용하는 다양한 방법이 있긴 있다.
그 중 재밌는 방법으로 dangerouslySetInnerHTML 이라는 속성이 있다
다른 재밌는 키워드로 SECRETINTERNALSDONOTUSEORYOUWILLBE_FIRED 도 있다.
(숨겨진 부분이니 사용하지 마세요. 그렇지 않으면 해고 당함 ㅋㅋ)

3.4.2 data- 속성

3.4.3 스타일 속성

3.4.4 class와 for 속성

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

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를 직접 이용한 스크립트를 작성하는 방법에 비해 설정해야 할 부분이 적다.
댓글
댓글쓰기 폼