리액트를 시작하기 전 import 해줘야 한다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>순서대로 react, react-dom , babel 이다.
const root = document.getElementById("root");
const H3 = React.createElement("h3", null, "hello hard coding");
const btn = React.createElement("button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
}},
"click me");
const Container = React.createElement("div", null, [H3,btn]);
ReactDOM.render(Container, root);바닐라 js 는 html 작성 후 js에서 html 을 수정하는데
리액트에서는 반대로 js를 먼저 작성해준다.
React.createElement(태그,프로퍼티(아이디나 클래스, 이벤트처리, css 등...), context) 로 html에 요소를 추가할 수 있는데, context 에 [H3,btn] 으로 작성하여 두 요소를 함께 렌더해줄 수 있다.
ReactDOM.render(렌더해줄 요소,html에서의 위치)
render는 리액트 요소를 가지고 html로 만들어 배치하는 것을 뜻한다.
하지만 위 코드는 복잡하여 실제 쓰이지 않는다.
JSX로 작성하는 방법을 알아보자.
JSX 는 Javascript에 XML을 추가한 문법이다.
자바스크립트 코드를 html 코드의 방식으로 작성하며,
하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.
JSX는 공식적인 자바스크립트 문법이 아니라서 babel(=트랜스파일러로, 자바스크립트 문법을 하위버전으로 바꿔주어 브라우저에서 동작할 수 있게 함.)을 이용해 일반적인 자바스크립트 문법으로 바꿔줘야한다.
babel 설치하거나 cdn을 이용하면 된다.
const Btn = () => (
<button
onClick={() => console.log("im clicked")}
style={{ backgroundColor: 'tomato', }}>
im clicked
</button>
);
const Container = (
<div><H3 /><Btn /></div>
)위 코드에서 Button,Container 부분을 JSX로 바꿔보았다.
위 Container처럼 한 컴포넌트 안에서 다른 컴포넌트를 사용하기 위해서는...
1. 다른 컴포넌트들의 이름이 대문자로 시작해야 한다.
2. 함수로 작성하여 요소들을 return 해주어야 한다.(화살표 함수로 작성하면 편하다)
function Btn(){
return (
<button
onClick={() => console.log("im clicked")}
style={{ backgroundColor: 'tomato', }}>
im clicked
</button>
);
}