리액트 : 자바 스크립트로 HTML 만들어서 사용하는 도구
컴포넌트: 홈페이지를 레고 조립 방식으로 만들기 위해 쪼갠 부품 단위 (재사용 용이하게)
HTML은 파일을 쪼개고 합치기 어렵다는 단점 -> react 사용
input.js
const 영희의인풋 = ()=>{
const 초기메세지 ="비밀번호를 입력하세요"
return (
<input type ="text" placeholder =({초기메세지}/>
)
}
button.js
const 철수의버튼 =()=>{
return(
<button>등록하기</button>
)
}
=> 위에서작성한 두 js를 합쳐서 구현 가능
나의도화지.render(
<div>
<철수의버튼/>
<영희의인풋/>
</div>
)
이때 <input type ="text" placeholder =({초기메세지}/> 과 <button>등록하기</button> 은 html이 아니라 가짜 HTML = JSX이다.
HTML과 JSX 작성방식이 다르다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리액트 실습</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const 나의도화지=ReactoDOM.createRoot(document.getElementById("root"))
나의도화지.render(
<h1>안녕하세요</h1> //JSX (HTML아님)
)
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
로 작성하면 아래와 같은 오류가 나타난다.
< 를 연산자로 인식하기 때문에 <h1>의 기능을 사용할 수 없는 것이다.
그래서 이때는 바벨 이라는 것을 사용하여 인식할 수 있게 도와줘야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리액트 실습</title>
<!-- 리액트 다운로드-->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!--바벨 다운로드-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!--1. 최신 문법으로 작성해도, 많은 브라우저에서 실행 가능하도록 옛날 문법으로 바꿔 줌-->
<!--2. 가짜 HTML(JSX) 입력하면, 진짜 HTML로 바꿔줌-->
<script type="text/babel">
const 나의도화지=ReactDOM.createRoot(document.getElementById("root"))
나의도화지.render(
<h1>안녕하세요</h1> //JSX (HTML아님)
)
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
바벨을 작성하니 정상적으로 출력됨을 확인할 수 있다.
컴파일러 : 컴파일 하는 도구
트랜스파일러 : 트랜스파일(같은 언어에서 같은 언어로 변경)하는 도구