주제
- 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')
)
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') )
실습
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>로 사용해서.
2 > Fragment에 대한 개념 좀 더 찾아보기
3 > javascript 표현식에 대한 개념 좀 더 찾아보기