리액트 라이브러리를 사용하는 방법 중 한가지, 여기서는 babel을 사용하였습니다.
우리가 사용하는 CRA에도 babel이 들어있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
//HTML파일에서 react.development.js, react-dom.development.js, babel.min.js를 불러들임
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> //div#root 태그 만들기
<script type="text/babel"></script> //type속성에 text/babel지정
</body>
</html>리액트 라이브러리는 단순 JavaScript가 아닌 리액트를 위해 개발된 JavaScript 확장 문법을 사용합니다.
그러한 문법을 사용하기위해 바벨이라는 라이브러리를 사용하고,
바벨을 적용할 부분을 지정하기위해 script태그에 바벨을 적용한 모습입니다.
리액트에서 화면에 출력되는 요소를 컴포넌트라하고, 최상위 컴포넌트를 루트 컴포넌트라고 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const component = <h1>리액트 과제 어려워요</h1>;
const container = document.getElementById('root');
ReactDOM.render(component, container);
</script>
</body>
</html>1. h1태그를 사용한 컴포넌트 생성
2. 해당 컴포넌트를 출력할 div#root 불러오기
3. ReactDOM.render()메소드로 컴포넌트를 div#root에 출력
<div id="root"></div>div#root을 선언하지 않는다면, 최상위 컴포넌트가 존재하지 않으므로 화면에 아무것도 출력되지 않습니다.
위에서 JavaScript코드 내부에 HTML코드를 사용하였는데, 이를 JSX문법(자바스크립트 확장문법)이라 하며,
바벨이 JSX코드를 읽고 일반 JS문법으로 변환 후 실행하여 이런 코드를 사용할 수 있는 것 입니다.
바벨 REPL도구를 사용하면 어떤 식으로 코드를 변환하는지 알 수 있습니다.
JSX문법은 단순히 태그를 만드는 기능 외에도 태그 내부에 표현식을 삽입해 출력하는 기능이 있습니다.
표현식을 출력할 떄는 {~~~}와같은 중괄호 기호를 사용합니다. 속성으로 표현식을 출력할 때는 따옴표를 사용하면 안됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const name = '이게 왜 되는걸까요?';
const imgUrl ='실제 이미지 url'
const component = (
<div>
<h1>{name} !!!!!!</h1>
<img src={imgUrl} />
</div>
);
const container = document.getElementById('root');
ReactDOM.render(component, container);
</script>
</body>
</html>위에서처럼 표현식을 출력할때 중괄호 안에 변수이름을 넣고, 속성을 넣을때 따옴표를사용하지않고 중괄호를 사용한 것을 볼 수있습니다.
'1차 공부 > 공부한 자료' 카테고리의 다른 글
| 외부폰트 가져온 후 특정 스타일드 컴포넌트에 적용하기 (0) | 2022.12.14 |
|---|---|
| 221214 스터디자료 env (0) | 2022.12.14 |
| 221213 UUID 공부자료 (0) | 2022.12.13 |
| 221209 리액트의 기본 (p.455~458) (0) | 2022.12.08 |
| 221126 7-1 스터디 정리자료 (0) | 2022.11.25 |