JSX ! 뭔지는 알고 쓰자!

JSX 개념

JSX를 쉽게 이해하려면 React 전용 HTML이라고 봐도 좋다.

좀더 자세히 풀자면 리액트 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장 개념에 가깝다. 

 

JSX를 사용하지 않은 리액트 예제를 보면 쉽게 이해할 수 있다.

//JSX 없이 리액트 기본문법 사용
React.createElement('h1', {className: 'title'},'Hello World')
//JSX 사용
<h1 className="title">'Hello World'</h1>

React.createElement를 사용해서 h1 태그를 만들던 것을 HTML 문법처럼 태그를 사용할 수 있다.

 

 

JSX를 사용하는 이유

위에서 봤듯이 JSX 엄청난 편의성을 제공을 하는 것을 알 수 있다. React 공식홈페이지에서도 JSX 사용을 장려한다. 이 편의성 하나로 모든 것이 설명되는 듯하다.

 

코드량 감소 및 생산성 향상

당연한 이야기다. 문법을 최소화하고 HTML 문법 처럼 사용할 수 있는데 어찌 생산성이 향상되지 않고 버티겠나. HTML만 다룰줄 알면 누구나 쉽게 코드를 수정할 수도 있다. 가독성도 높아지고 작성하기도 쉽다. 너무나 당연한 장점.

 

굳이 단점을 생각해본다면 JSX 문법을 자바스크립트 문법으로 전환해야하기 때문에 이에 발생되는 리소스? 그에 이어지는 랜딩 속도 감소?

이건 내 뇌피셜이다. 하하. 

 

 

JSX와 HTML의 문법 차이

주의할 점은 기존 HTML과 같은 문법을 사용하면 안 된다는 것.

 

1.  아래 예제와 같이 class를 지정하거다 onclick 함수를 호출하는 방식에서 비슷해보이지만 문법이 조금씩 틀리다.

//기존 HTML class와 onclick
<div>
    <div class="title"> 야호 </div>
    <button onclick="onClickBtn()">등록하기</button>
</div>
//JSX로 class와 onclick 구현
<div>
    <div className="title">야호</div>    // className을 사용한다.
    <button onClick={onClickLocationBtn} >등록하기</button> //onClick으로 사용하며, 
    중괄호 {} 안에 함수를 호출한다
</div>

2. 여러 컴포넌트가 있다면 최상 요소가 꼭 필요하다.

//여러 컨포넌트가 있을 때 부모 요소가 없으면 코드가 실행되지 않는다.
function App(){
    return(
        <div>헬로월드</div>
        <div>바이월드</div>
    )
}
// 최상위 요소를 생성해서 감싸줘야 한다.
function App(){
    return(
    	<div>
        	<div>헬로월드</div>
        	<div>바이월드</div>
        </div>
    )
}

 

3. 인라인 스타일 적용 시 카멜 표기법 사용

JSX로 css 스타일을 적용할 때는 '-' 을 제거하고 카멜 표기법을 사용한다.

//css 문법
border-color: 'black';
font-size: '5px'
//JSX 스타일 문법
const style = {
      borderColor: 'black',
      fontSize: '5px',
  }
  return (
  	<div style={style}>헬로월드</div>
  )
}

---

그동안 JSX가 어떤 개념인지도 모르고 그냥 사용했다.

근데 정말 고마운 존재네?