💡 React를 사용하는 이유?
React는 UI를 interactive하게 만들어준다.
웹사이트에 interactivity(상호작용)을 아주 간단하게 만들어준다.
React JS와 Vanilla JS를 비교해보자!
버튼을 몇 번 클릭했는지 세는 어플을 만들어보고
Vanilla JS에서 React JS로 개선할 수 있는 점이 무엇인지 살펴보자.
🔨 Vanilla JS
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click",handleClick)
</script>
</html>
- HTML 만들기
- Javascript에서 가져오기
- Listen for Event
- Update data => update HTML
계속 가져와서 계속 event listenr를 만드는 작업, handle function 만들고,,
하지만 더 편리하고, 더 나은 아이디어이며, 더 설계된 방식이 있다!
🔨 React JS
React JS를 설치하기 위해서는 두 개의 Javascript 코드를 import해야 한다.
<!DOCTYPE html>
<html>
<body></body>
<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></script>
</html>- React JS는 application이 interactive하도록 만들어주는 library이고,
- React-dom은 모든 React element를 HTML body에 둘 수 있도록 해준다.
이제 React를 사용할 수 있다.
📌 React JS element 생성
위 Vanilla JS로 구현한 페이지를 React JS로 똑같이 구현해보자.
React JS의 규칙 중 하나는 👉HTML을 직접 작성하지 않는다는 것, 대신에 Javascript 코드를 사용하는 것이다.
아래는 개발자들이 사용하지 않는, 불편하고 어려운 방식! React JS가 왜 필요한지 이해해보자!
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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>
const root = document.getElementById("root");
const span = React.createElement("span", { id: "sexy-span", style: {color:"red"}}, "Hello I'm a span");
ReactDOM.render(span, root);
</script>
</html>
React.createElement()
- parameters:
id,property,content
👉React JS는 Vanilla JS의 방식을 거꾸로 하는 방식이다!
바닐라 JS에서는 HTML을 먼저 만들고, 그걸 Javascript로 가져와서 HTML을 수정하는 방식이었다면, React JS는 모든 것이 JS로 시작해서 HTML이 된다.
🚩 React JS의 핵심: 결과물인 HTML, 유저에게 보여질 내용을 control할 수 있다.
📌 Events in React
propert에 event listener을 등록할 수 있다.
const btn = React.createElement(
"button",
{
onClick: () => console.log("I'm clicked"),
},
"Click me"
);💡 이게 바로 React JS의 power이다!
이렇게 button element를 생성하면서 event listener를 장착하며 content까지 담았다.
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a title"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("I'm clicked"),
style: {
backgroundColor: "tomato"
}
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root); 이처럼 React JS에서는 property에서 event listenr을 장착할 수 있다!
📌 createElement 대체하기 - 더 편리한 도구, 👉JSX 사용하기
JSX란 Javascript를 확장한 문법이다.
위의 createElement는 개발자들이 사용하지 않는다!! JSX를 사용한다!!!
JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 Babel를 사용한다.
(이 방식은 느리고, 더 나은 방식이 있다!)
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title () {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Button = () => (
<button id="btn"
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log("I'm clicked")}>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>그 다음으로, element를 function으로 만들어준다.
function Title () {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
} const Container = () => (
<div>
<Title />
<Button />
</div>
);Super Important! ✨ 이 때 component는 대문자로 시작해야 한다!!
소문자면 html element를 가리킨다.
이처럼 보기 쉽게 코드를 분리한 뒤에 함께 렌더링한다.
function Title () {
return (
);
}
const Button = () => {
<button id="btn"
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log("I'm clicked")}>
Click me
</button>
}위처럼 function () { return (); }와 const = () => {}는 같은 의미이다.
