JavaScript

[React] JSX 문법 왜 쓰는걸까?

LAZY SIA 2021. 10. 26. 20:59
728x90
반응형


리액트 개발환경 세팅하고
App.js 파일을 열었는데
분명 <div>같은 코드도 있고 HTML 형식 같은데
class가 아니라
JS처럼 className이 적혀있네요?



HTML인 것 같지만 이것은
JSX (JavaScript eXtension) 라는 문법입니다.
JS파일 안에서 HTML을 작성하기 위해 도와주는 리액트 기본 내장 문법이라 생각하시면 됩니다
일종의 JS이기 때문에 className이라고 써야 CSS의 class명과 연결할 수 있습니다

리액트에서는 HTML 대신 JSX라는 문법을 사용할 수 있습니다





그렇다면 HTML이 아닌

JSX 문법을 사용하는 이유가 무엇일까요?




바로 데이터바인딩 때문입니다.
(JS 데이터를 HTML에 넣는 작업을 뜻합니다)


예를 들어,
변수를 div의 내용으로 넣고 싶다고 할 때

기존 JS 에서는
변수 선언해서
document.getElementById().innerHTML = 변수명
이런 식이었겠죠?

하지만
리액트에서는 훨씬 간단하게 데이터 넣을 수 있습니다
변수 선언해서
div에 { 변수명 }을 넣어주면 됩니다

function App(){ var hello = 'hello'; return ( <div className="App"> <div>{ hello }</div> </div> ) }

이런 식으로요



변수로 예를 들었지만
미리 만들어둔 함수명 등 별걸 다 넣을 수 있습니다


div 내용으로 예를 들었지만
여러 HTML 속성들(className, id, href, src 등)에 데이터바인딩이 가능합니다
원하는 위치에 직접 넣어주기만 하면 됩니다




그리고...
CSS 도움 없이 HTML에 직접 스타일 넣을 때 원래
<div style = "color : orange" > 이런 식으로 했는데,
리액트 JSX 상에선 무조건 { 오브젝트 }로 바꿔 넣어야 합니다
<div style={ {color : 'orange', fontSize:'30px'} }>
(속성명에 - 있다면 붙여쓰고 뒷단어 앞글자를 대문자로 치환해 camelCase 로 만들어야 합니데이)


복잡하죠?
그러니 스타일은 그냥 CSS에서 작업하도록 합시다

반응형