JSX ? Babel? (220606)

정재욱·2022년 6월 6일
0

JSX? Babel?

Why JSX ?

  • React.createElement VS JSX
    가독성이 JSX가 넘사벽으로 좋음 아래 참고.
  • babel과 같은 컴파일 과정에서 문법적 오류를 인지하게 쉽게 해줌

주제

  • React
  • Vue
      <div>
        <div>
            <h1>주제</h1>
            <ul>
                <li>React</li>
                <li>Vue</li>
            </ul>
         </div>
        </div>

위에서 보이는것처럼 저런 복잡한(실제로는 훨씬 더 복잡할) HTML 구조를 짜려는 행위를 하고자 할때,
아래와 같은 삽질을 하지 않기 위해서
JSX 문법으로 작성된 코드를 순수한 javascript로 컴파일 하여 사용한다 (Using Babel)

// React.createElement()를 이용한 삽질
// !! 쓰레기같은 방법. 안좋은 예를 보여주기 위한 예시
        ReactDOM.render(
            React.createElement(
                "div",
                null,
                React.createElement(
                    "div",
                    null,
                    React.createElement("h1", null, "주제"),
                    React.createElement("ul", null, React.createElement('li', null, "React"), React.createElement('li', null, "Vue")
                    )
                )
            ),
            document.querySelector('#root')
        )
        
        
// Using Babel (Babel을 사용하면 아래와 같이 간단하고 직관적으로 사용 가능)
// 여기서 문법적 오류도 쉽게 잡아줌.
// 닫는 태그가 없다거나 하는 오류를 쉽게 잡아줌
// HTML 작성하는것보다 엄격하게 체크해줌
        ReactDOM.render(
            <div>
                <div>
                    <h1>주제</h1>
                    <ul>
                        <li>React</li>
                        <li>Vue</li>
                    </ul>
                </div>
            </div>,
            document.querySelector('#root')
        )

How to JSX ?

1. 최상위 요소가 하나여야 함.

// 이렇게 사용하면 안됨.
ReactDOM.render(
            <div>
            안녕
            </div>
            <div>
            하세요
            </div>,
            document.querySelector('#root')
        )
// 아래와 같이 최상위에는 하나의 부모요소만 존재해야함.
ReactDOM.render(
		<div>
            <div>
            안녕
            </div>
            <div>
            하세요
            </div>
 		</div>,
            document.querySelector('#root')
        )

2. 자식들을 바로 렌더링하고 싶으면, <>children</>를 사용합니다 => Fragment

TODO : Fragment에 대한 개념 좀 더 찾아보기

// 1번의 그렇게 하면 안되는 예시처럼 사용하고 싶으면 아래처럼 빈 <> ~~~ </>를 사용
ReactDOM.render(
 		 <>
            <div>
            안녕
            </div>
            <div>
            하세요
            </div>
  		 </>,
            document.querySelector('#root')
        )

3. javascript 표현식을 사용하려면 {표현식}을 사용합니다.

TODO : 표현식에 대한 개념 좀 더 찾아보기

// ${var} 안하고
// {var} 이렇게 사용해도 된다는것. 아래 참고.
const hello = "안녕";
ReactDOM.render(
 		 <>
            <div>
  			${hello}//javascript에서 사용할때
			{hello} //JSX에서 사용할때
            </div>
            <div>
            하세요
            </div>
  		 </>,
            document.querySelector('#root')
        )

4. if 문은 사용할 수 없습니다. 삼항 연산자 혹은 && 를 사용합니다

5. style을 이용해 인라인 스타일링이 가능합니다.

6. class 대신 className을 사용해서 class를 적용해야 합니다

const hello = "안녕";
ReactDOM.render(
 		 <>
            <div className="box"> // class="" 말고 className="" 사용
			{hello}
            </div>
            <div>
            하세요
            </div>
  		 </>,
            document.querySelector('#root')
        )

7. 자식요소가 있으면 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야합니다.

const hello = "안녕";
ReactDOM.render(
 		 <>
            <div>
  			안녕
  			<br/> // 이렇게 꼭 바로 닫아주기 해야함!!
            </div>
            <div>
            하세요
            </div>
  		 </>,
            document.querySelector('#root')
        )

Babel?

실습

https://babeljs.io/
위 링크 들어가서 왼쪽에 내가 만들고싶은걸 쓰면
오른쪽에 알아서 변환시켜서 보여줌.

사용법

https://babeljs.io/setup 에 가서 보도록

브라우저에서 바로 사용하는법도 있음 (HTML 파일에 cdn 추가해서 사용)

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/javascript"></script>가 아니라
<script type="text/babel"></script>로 사용해서.

TODO

JSX에서

2 > Fragment에 대한 개념 좀 더 찾아보기
3 > javascript 표현식에 대한 개념 좀 더 찾아보기

profile
이 벨로그에서는 정보를 습득해가지 마세요 틀렸을수도 ^^;

0개의 댓글