[React.JS] 강좌 3편 JSX


liste

이번 강좌에서는 React.js 에서 사용되는 JSX 문법에 대하여 알아보겠습니다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있습니다.

  • JSX는 컴파일링 되면서 최적화 되므로, 빠르다
  • Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나타내지 않는 것 [출처: jerrypop 블로그]) 하며 컴파일링 과정에서 에러를 감지 할 수 있다.
  • HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다.

1. JSX 사용하기

JSX는 HTML이랑 거의 비슷하게 생겼습니다. 저번강좌에서 작업환경을 설정 할 때도 App.js 에서 JSX가 사용되었는데요 한번 다시 봐볼까요?

App.js

  • LINE 1: import 는 ES6 에 도입된 새로운 문법인데, var React = require(‘react’) 와 같습니다. React 모듈은 Component를 만들때 사용됩니다.
  • LINE 3: class 개념 역시 ES6 에 새로 도입된 요소중 하나 입니다. 모든 Component는 React.Component 를 상속합니다. ES5 환경에서는 React.createClass() 라는 메소드를 사용합니다.  또한, ES5 에서 클래스를 만들때는 메소드들을 nest 할 수 없고 prototype을 사용했어야 했는데, 많이 편해졌죠. ES6 Class 에 대해서는 Mozilla 참고자료 에서 확인하세요.
  • LINE 4: render() 메소드에서는 컴포넌트에 렌더링 될 데이타를 정의합니다.
  • LINE 5~7이 부분이 JSX의 가장 중요한 부분입니다. 보시면, 자바스크립트에서 html 태그를 반환하는데, 따옴표같은건 없죠? React JSX 는 XML-like Syntax 를 native Javascript로 변환해줍니다.  따라서 ” ” 로 감싸지 않는 점 주의하시구요, ( ) 를 사용하지 않아도 오류는 발생하지 않지만 가독성을 위하여 사용하는것이 좋습니다.

확장자에 대하여..

JSX 파일의 확장자의 경우, 이전에는 개발자들이 .jsx 확장자를 사용하였지만 요즘은 .js 를 사용하는 추세로 전환되어 가고 있습니다. 페이스북의 오픈소스 에디터인 draftjs 는 구별을 제대로 하기 위하여 .react.js 확장자를 사용하기도 합니다. 이 강좌에서는 .js 확장자를 사용하도록 하겠습니다.

JSX VS JS

JSX 를 사용했을 때 와 사용하지 않았을 때를 비교해보고싶다면 다음 링크들을 클릭해보세요.

2. Nested Elements

컴포넌트에서 여러 Element 를 렌더링 해야 할 때, 그 element들을 필수적으로 container element 안에 포함시켜줘야됩니다.
예를들어 다음과 같이 코드를 작성하면:

변환 과정에서 다음과 같은 오류가 발생합니다.

다음과 같이 div element 를 wrapper 로 사용하면 오류가 발생하지 않습니다.

3. JavaScript Expression

JSX 안에서, JavaScript 표현을 사용하는 방법은 매우 간단합니다. 그냥 { } 로 wrapping 하면 됩니다.

  • LINE 2: ES6 에 도입된 let 키워드는 var 과 비슷하지만, var 변수의 scope는 기본적으로 함수 단위인데 let 은 블럭 범위 내에서 변수를 선언합니다. 따라서 가끔 발생하는 javascript 의 Scope관련 문제를 해결 할 수 있습니다. 지금 이 상황에선 let 을 사용하는것이 필수는 아니지만, ES6 에선 평상시 let 을 쓰고 var은 필요한 상황에서만 사용하는게 좋습니다. let 에 관련된 정보는 Mozilla 참고자료 에서 더 읽어보세요.
  • LINE 6: { text } 를 사용하여 text Javascript 변수를 렌더링합니다.

 

임의 method 생성 및 사용하기

React 에서 method를 생성하고 사용하는 방법에 대하여 알아보겠습니다.

  • LINE 11:  {this.sayHey} 를 통해 버튼이 클릭되면 해당 메소드가 실행되게 할 수 있습니다.  () 가 뒤에 안붙어있다는점을 주의해주세요. 만약에 () 가 붙으면 페이지가 로드 될때도 실행되고, 클릭할때도 실행됩니다.

If-Else 문 사용 불가

JSX 안에서 사용되는 JavaScript 표현에는 If-Else 문이 사용 불가합니다. 이에 대한 대안은 ternary ( condition ? true : false ) 표현을 사용하는 것입니다.
예:  <p>{1 == 1 ? 'True' : 'False'}</p>

4. Inline Style

React의 Inline Style 에서는, string 형식이 사용되지 않고 key 가 camelCase 인 Object 가 사용됩니다.
한번 예제를 통하여 배워봅시다.

pStyleelement 에 적용되었습니다.

5. 주석

JSX 안에서 주석을 작성할 때엔, { /* comments */ } 형식으로 작성하면 됩니다. 여기에 작성된 주석은 브라우저상 source 에서 나타나지 않습니다.

주의하실 점은 2. Nested Element 에서 나왔던 것 처럼 container element 안에 주석이 작성되어야 합니다.

6. Naming Convention

모든 React Component 은 첫 문자가 대문자인 CamelCase 로 작성됩니다.

 

마무리하며..

출력물

캡처

JSX 의 기본적인 형식을 알아보았습니다.

이 강좌에서 사용된 코드는

다음 강좌에서는 Component 에 대하여 자세히 알아보도록 하겠습니다.

liste

  • qvil

    안녕하세요. 강의 정말 잘 보고있습니다! 궁금한 점이 있는데요
    React에서 class나 render 메쏘드 _sayHey 메쏘드 등의 중괄호 끝에 세미콜론을 붙이지 않는 이유가 있나요?
    테스트 해봤는데 세미콜론 붙여도 정상동작하는데 혹시 실무에서 사용하는 디자인패턴이라던가 다른 이유가 있는지 궁금합니다. 🙂

    • 저는 그 부분에 대하여 생각해본적이 없어서 한번 검색을 해봤는데요

      클래스에서 ; 가 붙어도 오류가 안나는이유는

      http://exploringjs.com/es6/ch_classes.html
      를 참고하시면

      Semicolons are allowed, but ignored:

      Semicolons are allowed in preparation for future syntax which may include semicolon-terminated members

      라고 나와있네요. 그 세미콜론은 사용해도 오류는 안나고, ES6에서 트랜스파일과정에서 무시되며, 다음 자바스크립트 문법에서 semicolon으로 끝나는 멤버를 지원을 하기 위한 준비를 위해서 허용이 된다고 하네요.

      지금은 클래스 멤버변수를 만들때 클래스선언을 하고 그 하단에서 하거나 (App.foo = 1 이런 식) constructor 에서 해야하는데 나중에는 클래스내부에서

      foo = 1; 이렇게 할 수 있을 것같아요.

      정리를 해드리자면, 디자인 패턴이 따로있는건 아니구 semicolon은 메소드 뒤에 붙이는 용도가 아니다 가 되겠네요~

      즐거운 공부되세요~~

  • 배준경

    강의 감사합니다~!
    궁금한게 있는데요 ES6에서 import로 불러오는 것과 var React = require(‘react’)와 차이가 있는건가요???

    • 아직 ES6 를 지원하지 않는 브라우저들을 호환시키기 위해 저희는 babel 을 통하여 ES6 문법을 ES5 로 변환합니다.
      그래서 결국 성능면에서는 똑같습니다.

  • Nununana

    역시친절한벨로퍼트님이시네여

  • qvil

    궁금한 점이 있습니다.
    임의 method 생성 및 사용하기 에서
    LINE 1: Component 가 상속하는 메소드가 아닌 임의 메소드라는걸 확실하게 명시하기 위하여 메소드 이름을 _ 로 시작하는것을 권장합니다.
    라고 하셨는데, 뒤에 나오는 강의에서 handleClick 같은 상속받지 않는 메소드에 왜 _를 붙이지 않는지 혹시 다른 이유가 있는지 궁금합니다.

    • 질문해주셔서 감사합니다 😀

      React 를 처음 시작할때쯤엔 그렇게 임의메소드는 _ 로 시작하는 컨벤션을 따르고있었는데 나중에가선
      이 스타일이 권장되지 않는것을 알게되어 _ 를 없앴습니다. (https://github.com/airbnb/javascript/tree/master/react#methods)
      혼동을 방지하기 위하여 게시글을 수정하였습니다.

  • Hyun

    굉장히 간결하고 이해하기 쉽게 강좌를 올려주셔서 편하게 학습하고 있습니다.

    LINE 11: {this.sayHey} 를 통해 버튼이 클릭되면 해당 메소드가 실행되게 할 수 있습니다. () 가 뒤에 안붙어있다는점을 주의해주세요. 만약에 () 가 붙으면 페이지가 로드 될때도 실행되고, 클릭할때도 실행됩니다.

    이부분이 특이해서 저도 직접 실험해보기 위해 코드에 ()를 넣고 실행해보았더니 페이지가 로드될 때 실행이 되고, 클릭할때는 실행이 되지를 않습니다. 최근에 스펙이 변경된걸까요? 확인해보고 저와 같이 실행이 되지 않는다면 저부분을 수정하셔야 할 것 같습니
    다.