#2.0 Introduction (04:05)
ReactJS가 해결해주는 문제를 이해하는 것부터 시작한다. ⇒ 이 기술은 왜 만들어졌는가 이해하기.
•
ReactJS는 웹사이트의 상호작용을 위해 생겼다. interactive 한 웹사이트를 만들기 위해서.
•
예를 들면, 자바스크립트에서 버튼과 텍스트가 상호작용 하는 웹페이지를 만들고 싶다.
⇒ 버튼에 클릭 이벤트를 붙이고, 클릭할 때마다 화면의 텍스트를 업데이트 하는 function을 실행해야 한다.
•
ReactJS는 버튼을 생성하고 클릭을 감지하는데 필요한 것이 무엇인지 알아서 이것에 대한 지름길을 만들어 놓은 것이다!!
#2.1 Before React (07:02)
원래 해오던 자바스크립트 방식에서 리액트로 바꿀 점을 찾아보자.
<!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
복사
~~바닐라 자바스크립트 방식~~
1.
HTML을 그린다.
2.
자바스크립트에서 가져온다.
3.
이벤트를 감지한다.
4.
데이터를 업데이트 한다.
5.
HTML을 업데이트 한다.
이제 이 코드를 리액트로 작성해보자!!
리액트로 작성하기 전에 설치부터 해야겠죠?
<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>
JavaScript
복사
import 후
콘솔에서 React를 호출하면!
짜잔
#2.2 Our First React Element (10:31)
React JS의 규칙 중 하나는 HTML을 HTML 코드를 직접 작성하지 않는다는 것이다. 어떤 요소가 필요하다면 자바스크립트를 사용해서 만드는 것이다!
React는 interative한 UI를 만들기 위한 엔진과 같다.
react-dom은 React element를 HTML에 두는 역할을 한다.
<!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" }, "Hello, I'm a span");
ReactDOM.render(span, root);
</script>
</html>
HTML
복사
리액트로 span 요소를 그려보았다.
리액트는 우리가 기존에 해왔던 방식과 거꾸로 하고 있다. html을 먼저 그리고 요소를 찾아와 업데이트 했던 기존의 방식과는 달리 리액트는 업데이트 할 것을 html에 그려! 라고 하고 있다.
설명을 위해 실제로는 쓰지 않는 createElement를 사용했고 코드는 복잡하고 어렵지만 일단 이 원리를 이해하도록 하자.
#2.3 Events in React (08:01)
<!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 h3 = React.createElement("h3", {
id: 'title',
onMouseEnter: () => console.log('mouse enter'),
}, "Hello, I'm a span");
const btn = React.createElement("button", {
onClick: () => console.log('im click'),
}, "Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
JavaScript
복사
prop Object를 작성해 보았는데,
리액트는 이미 알고있다…
id는 html에 들어가야 하고 onMouseEnter는 이벤트라는 것을…(소름)
#2.4 Recap (05:47)
•
import
//엔진
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
//ReactDOM => React Element들을 HTML로 바꿈
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
JavaScript
복사
•
render는 어느 요소 안에 html 태그를 그릴 것인지 설정하는 것
•
createElement는 쓸 일 없음, 다른 방식 사용
•
prop object 작성 → 일부는 html로, 일부는 js 이벤트리스너로, …
•
데이터 업데이트는 아직 해보지 않았다. ⇒ 추후 강의에서 배움
#2.5 JSX (08:22)
JSX란? 자바스크립트를 확장한 문법. 실제로 많이 쓰이는 문법이고, HTML과 비슷해서 익숙하다는 장점이 있다.
기존에 작성했던 코드와 비교해보겠다.
•
기존코드
<!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 h3 = React.createElement("h3", {
id: 'title',
onMouseEnter: () => console.log('mouse enter'),
}, "Hello, I'm a title");
const btn = React.createElement("button", {
onClick: () => console.log('im click'),
}, "Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
JavaScript
복사
•
JSX 문법을 사용한 코드
<!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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3
id="title"
onMouseEnter={() => console.log("mouse enter")}
>
Hello, I'm a title
</h3>
);
const Button = (
<button
style={{backgroundColor: "tomato",}}
onClick={() => console.log("I'm Click")}
>
Click me
</button>
)
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
JavaScript
복사
특징은?
•
개발자들이 어떤 코드인지 한 눈에 알 수 있다.
•
HTML 코드와 굉장히 비슷하다.
•
createElement는 여러 가지 것들을 기억해서 사용해야 하는 반면, JSX는 직관적으로 이해하기 쉽다.
•
브라우저에게 JSX로 적은 코드를 이해시키기 위해 “babel”을 설치해야 한다.
(JSX 코드를 브라우저가 이해할 수 있는 형태로 변환시켜준다.)
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
JavaScript
복사
바벨에서 미리보기 가능
◦
하지만 이 방식은 속도가 느리기 때문에 항상 쓰이는 방법은 아니다.
#2.6 JSX part Two (07:19)
<!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 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>
);
};
function Button() {
return (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("I'm Click")}
>
Click me
</button>
);
};
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
JavaScript
복사
•
Container에 Title과 Button 코드를 복사/붙여넣기 한 것과 같다.
•
컴포넌트의 첫 글자는 반드시 대문자여야 한다. (소문자라면 html 요소라고 판단)
•
즉, 함수로 만들어야 하고, JSX 코드를 리턴해주는 형식이다.
