ReactJS 그리고 JSX를 시작해보자

오늘은 Facebook에서 만들어 유명한 라이브러리인,

React JS에 관해서 정리해 보고자 합니다.

가장 먼저 알아볼 것은 JSX인데요.

공식문서에서는 UI에 대해서 기술할 때, jSX를 써서 표현하는 것을 추천하고 있습니다.

1. JSX

JSX는 Javascript익스텐션으로 React의 엘리먼트들을 만들어 줍니다.

뭔가 또다른 언어를 배워야 하는 느낌이겠지만,

Javascript나 HTML을 사용해보았다면 위화감없이 배울 수 있습니다.

그럼 하나하나 알아보도록 하겠습니다.

1-1. 하나의 attribute로 감싸고, 괄호로 열고 닫음

JSX의 특징은, 괄호'()'를 사용해서 열고 닫는 것이 가장 눈에 큰 특징인데요.

한가지 잊지 말아야하는 규칙은, 여러개의 attribute이 아닌 div처럼 하나의 element로 감싸져 있어야 합니다.

아래의 예처럼 여러개의 attribute을 넣고 괄호를 닫으면 에러가 발생합니다.

1-2. class대신 className을 사용

JSX에서는 html태그에서 쓰던 class대신 className을 사용합니다.

1-3. Closing tag가 없는 경우 슬래쉬(/)처리

<br>같이 closing tag가 없는 경우는 반드시 뒤에 슬래쉬(/)를 붙여주어야 합니다.

1-4. Javascript부분은 { }를 사용

JSX에서 Javascript는 아래와 같이 {}를 이용해서 넣어주면 됩니다.

아래와 같은 방법으로도 사용가능합니다.

1-5. Inline style의 표현

inline스타일은 아래와 같이, 괄호를 두개 겹쳐서('{{ }}') 표현합니다.

바깥쪽은 괄호는 위에서 정리한 대로, 자바스크립트 임을 의미하구요.

안쪽의 괄호는 오브젝트임을 의미합니다.

스타일의 경우 inline으로만 표현하면 가독성이 떨어질 수 있으므로, 

아래 이미지와 같이 밖으로 꺼내서 표현할 수도 있겠습니다.

추가적으로 Javascript에서의 style은 margin-top과 같이 하이픈으로 연결되어 있는데요.

JSX에서는 CamelCase로 marginTop과 같이 표현합니다.

그리고 javascript와는 다르게 px단위는 사용하지 않아도 string이 아닌, 숫자로 입력하면 알아서 동작합니다.

예를 들면 fontSize:"50px"의 경우 그냥 fontSize:50이라고 적어도 익셉션을 일으키지 않고 잘 동작합니다.

1-6. EventListener

이미지에 가장 많이 쓰이는 onClick의 경우 아래와 같이 사용할 수도 있는데요.

http의 경우onclick이지만 JSX에서는 onClick으로 camelCase를 사용한다는 점은 참고할 필요가 있습니다.

webStorm같은 에디터를 사용하면 실수를 줄여줄 수 있을 것 같네요.

1-7. if문

아래와 같이 if문을 사용할 수도 있습니다.

기본적으로는 Javascript 익스텐션이기 때문에 Javascript에서 쓰던 것들이 대부분 사용가능하네요.

삼항연산자를 이용해서도 표현이 가능합니다.

1-8. map연산자

Javascript의 ES6에서 지원하는 map연산자도 사용할 수 있습니다.

React문서에서는 배열에서 map() 연산을 사용할 경우 key값을 제공해주는 것이 좋다고 하는데요.

보통 리스트아이템에 들어있는 id값을 유니크한 키값으로 제공해 주면 됩니다.

(만약 id값이나 unique한 값이 없다면, index값을 인자로 넣어서라고 써야되지만 추천하지는 않는다고 하는군요.)

DB에 들어가 있는 아이템을 읽어와서 아래와 같이 사용할 수 도 있겠네요.

마지막으로는 ReactJS를 사용하는데 있어서,

React.createElement메소드를 사용하면 JSX를 쓰지 않아도 되는데요.

대부분 JSX를 사용하고 있기에, 이 글에서는 다루지 않겠습니다.

2. ReactDOM.render()

ReactDOM의 render()메소드를 이용하면,

JSX로 만든 UI Element들을 렌더링 할 수 있습니다.

메소드의 첫번째 인자는 element를 넣어주고,

두번째 인자는  document.getElementById()를 이용해서

아래와 같이, function과 setInterval메소드를 이용해서 ui를 업데이트 하는 것도 가능합니다.

이렇게 해서 JSX와 ReactDOM.render를 이용한 render까지 알아보았구요.

다음글에서는 Component에 대해서 알아보도록 하겠습니다.