1. JSX?
주로 React에서 Component를 만드는데 사용되는데, html처럼 화면에 나타나는 UI를 그리는 역할을 한다. js의 확장 문법이고, html과 혼합해서 사용할 수 있다. 따라서 html, css, js의 기본적인 부분을 알고있다면 어렵지 않게 이해하고 사용할 수 있다.
예를 들어, 태그들의 class를 지정할 때 className으로 하고, html에서와 달리 jsx에서의 태그들은 모두 닫혀있어야 한다. html에서 닫을 필요가 없었던 <br>, <image> 들은 jsx에서 반드시 닫아주어야 한다. 닫는 것이 번거롭다면 <br />, <image /> 이런 식으로 열자마자 바로 닫아주면 된다.
그리고 jsx에서 태그들을 return하려면 반드시 최상위 태그로 감싸져야 한다.
최상위 태그로 감싸기 귀찮다면 import React from 'react';를 해주고 <React.Fragment></React.Fragment>로 감싸주면 된다.
inline으로 css를 적용하는 부분도 조금 다르다. 객체를 선언해서 사용할 수 있다. 기존에 속성을 지정할 때 dash case였는데, jsx에서는 camel case로 지정을 한다.
css가 정상적으로 적용된 것을 볼 수 있다.
마지막으로 {}안에는 숫자, 문자열, 함수 등이 들어갈 수 있다. 배열이나 boolean 값이 들어가면 rendering이 되지 않는다. 이를 다음과 같이 삼항연산자를 사용하여 응용할 수 있다.
지금까지 jsx에서 몇가지 다른 점을 설명해보았는데, html, css, js에 대해 알고있다면 어렵지 않을 것이다.
2. Component
jsx 문법으로 Component를 만들어보면서 연습해보려고 한다. 파일 확장자를 jsx로 설정해도 되는데, js로 해도 자동인식이 된다. 함수형 Component를 사용해서 다음과 같은 기존의 화면에 추가해보려고 한다.
먼저 Header.js, Header.css, Footer.js, Footer.css 파일을 만든 후 원하는 값을 반환하는 Header, Footer 함수를 만들어준다. 그 후 ES module 방식으로 export를 해준다.
App.js 파일에서 export 해준 Header.js와 Footer.js 파일을 import 해준 후, App 함수의 return에서 원하는 부분에 <Header></Header> 또는 <Header/> 같은 방식으로 추가해준다.
맨 위에는 <Header/>, 맨 아래에는 <Footer></Footer>를 추가해주었고, 결과는 다음과 같다.
이러한 방식으로 Component를 생성 후 조합하면서 React Application을 만들 수 있다. 특히 같은 부분이 반복되는 Application을 작업할 때 만들어놓은 Component를 사용하면 빠르고 쉽게 만들 수 있다.
