[React.js] JSX의 특징

모든 React 컴포넌트는 render 메소드가 있는데,

이 메소드는 컴포넌트가 어떻게 생길지 정의해준다.

 

---

JSX

 

* JSX는 xml같은 문법을 native JavaScript로 변환

괄호를 사용하지 않아도 오류는 발생하지 않지만 가독성을 위해 사용

* JSX는 이전에 설정해주었던 Bable이 작동하게 해줌

Bable에서 JSX 로더를 사용하여 JSX 형태 코드를 변환

 

render 메소드 안에서 어떤 view를 보여줄지 JSX 형태로 리턴해준다.

Codelab 이라는 text를 렌더링 한다.

 

이렇게 만든 컴포넌트를 다른 컴포넌트에서 또 다시 사용할수도 있음.

 

이제 App 컴포넌트를 만들고, Codelab 컴포넌트를 보여주게 한다.

 

똑같이 render 메소드 작성 후 return에 Codelab 컴포넌트를 보여주게 설정한다.

 

페이지에 렌더링 하기 위해 HTML을 작성한다.

id가 root인 div 작성

 

React DOM의 render 메소드를 이용하여 만들어 둔 컴포넌트를 렌더링한다.

React DOM은 실제 페이지의 JSX 형태 코드를 렌더링할때 사용됨.

 

* 이 메소드의 첫번째 인수는 우리가 렌더링 할 JSX 형태의 코드이다.

App 컴포넌트를 렌더링 할것이기 때문에 <App/> 작성

* 두번째 인수는 이 컴포넌트를 렌더링할 엘리먼트이다.

root 엘리먼트에 렌더링 할 것이기 때문에 documnet.hetElementById를 작성

 

Codelab 렌더링

 

---

 

JSX의 특징

 

1) 모든 JSX 형태의 코드는 container element 안에 포함시켜야 한다.

 

2) JSX 안에서 Javascript를 표현할때는 {}로 wrapping 하면 된다.

"Hello React!"라는 변수를 <div> 안에서 보여주고 싶을때 {}로 감싸서 표현

 

* let : ES6 문법

  var과 비슷하게 변수를 선언할때 사용되지만 let은 블록 범위 내에서만 변수를 선언

  let은 한 번 선언되면 다시 한 번 선언 불가능

  ES6에선 평상시에 변수를 선언할때 let 사용

 

 

3) JSX 안에서 style을 설정할때는 string 형식을 사용하지 않고, key가 camelCase인 객체가 사용된다.

background-color가 아닌 backgroundColor로 사용

 

4) JSX 안에서 주석을 작성 할 때는 { /* ... */ } 형식으로 작성한다.

Nested Element 부분에 설명했던 것과 같이 container element 안에 주석이 작성되어야 함

 

 

 

 

 

 

'[InFlearn] React & Express를 이용한 웹 어플리케이션 개발하기' 강의를 참고하였습니다.