2.1 Before React
- 학습 일자 : 2024.03.13
vanilla.html
⇒ 코드
<!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>⇒ 결과
- 클릭 할수록 옆의 숫자가 올라감
index.html
⇒ 사전 준비 URL
- 아래 2개의 URL을 소스 코드에 import 해줘야 React를 사용할 수 있음
- https://unpkg.com/react@17.0.2/umd/react.production.min.js
- https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js
⇒ 코드
<!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>⇒ 결과
2.2 Our First React Element
- 학습일자 : 2023.03.14
index.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", style: {color:"red"}},
"Hello I'm a span"
);
ReactDOM.render(span, root);
</script>
</html>- 리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능
- React.createElement(“span”) 과 같은 경우
- 반드시 생성하고자 하는 HTML 태그와 똑같아야 함
- React.createElement("span", {span의 property}, “span의 내용”)
- property는 class name, id도 가능 style도 가능
- 참고만 하고 외우지 말기. 이렇게 쓸 일 없음
- React JS
- 어플리케이션이 아주 인터랙티브하도록 만들어주는 library
- 엔진과 같다.
- React-dom
- library 또는 package
- 모든 react element들을 HTML body에 둘 수 있도록 해줌.
- ReactDOM.render()
- render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것.
- 즉, 사용자에게 보여준다는 의미
- ReactDOM.render(span, span이 가야할 위치)
- 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함
- 바닐라JS : HTML -> JS 순서
- 리액트 : JS -> HTML 순서
- JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
- React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음
⇒ 결과
2.3 Events in React
- 학습일자 : 2023.03.14
index.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 h3");
const btn = React.createElement(
"button",
{
onClick: () => console.log("i'm clicked"),
style: {
backgroundColor: "tomato"
}
},
"Click me");
// span과 btn을 한 DIV에 넣어주기 위해서는 아래와 같이 해야 함
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>- 두 가지 const를 render 하고 싶은 경우 div를 만든다
- 그리고 React.createElement("div", null, [span, btn]); 와 같이 배열을 만들어서 const를 넣어준다.
- property에 eventListener 넣는 것도 가능.
- 클릭 - {onClick: () => console.log("I'm clicked")}
- 마우스엔터 - {onMouseEnter: () => console.log("mouse enter")}
⇒ 결과
2.5 JSX
- 학습일자 : 2023.03.15
index.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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- babel js -->
<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 clicked")}
>
Click me
</button>
);
// span과 btn을 한 DIV에 넣어주기 위해서는 아래와 같이 해야 함
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>- babel JS 설치
- babel JS 설치 이후
- 이 안에 하고 싶은 내용을 적는다.
- 이렇게 하면, 내가 간단하게 적은 것을 babel이 html에서 알아먹을 수 있도록 자체 번역한다.
VS Code - Prettier 설치
- pretter가 아닌 prettier가 맞음
- 참고
2.6 JSX part Two
- 학습일자 : 2023.03.16
index.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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- babel js -->
<script type="text/babel">
const root = document.getElementById("root");
/* 반드시 대문자로 작성할 것! --> 소문자 작성시 태그 명칭과 헷갈릴 수 있음 */
function Title () { // arrow 함수를 안 쓴 함수 : return이 필요
return (
<h3 id="title" onMouseEnter = {() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Button = () => ( // arrow 함수 사용
<button
style={{backgroundColor: "tomato"}}
onClick={ () => console.log("i'm clicked")}
>
Click me
</button>
);
const Container = () => (
<div><Title /> <Button /></div>
);
ReactDOM.render(<Container />, root);
</script>
</html>- 이전 강의에서 사용했던 변수 title, button, container의 앞글자를 모두 대문자로 변환
- Title, Button, Container
- 이렇게 한 이유?
- https://ko.legacy.reactjs.org/docs/jsx-in-depth.html
- 만약 변수명이 태그명과 동일한 상황에서 render를 해주면 babel등에서 해당 변수명이 변수명인지 태그명인지 구분이 안가서 에러가 날 수 있음
- 따라서
- 변수명이 컴포넌트명과 겹치든 겹치지 않든, 관례적으로 변수명의 맨 앞을 대문자로 해주기!
- Title, Button, Container를 사용자 정의 컴포넌트로 변환
- 참고로 Title 컴포넌트는 arrow 함수를 사용하지 않았고, Button 컴포넌트는 arrow 함수를 사용
- 결과는 동일하지만, 컴포넌트에 적용한 함수가 무엇이냐로 다를 뿐
- 참고로 Title 컴포넌트는 arrow 함수를 사용하지 않았고, Button 컴포넌트는 arrow 함수를 사용
⇒ 결과
느낀점
vanill JS 공부 당시, 이거를 통해서도 개발을 하는 것이 재밌기는 했지만 특정 이벤트가 필요할 때마다 id 지정을 하고, 또 해당 id를 찾아야 하는 등의 작업이 번거롭기는 했다.
공부여서 그렇지, 만약 실무에서 vanilla JS로 웹이나 앱을 구축해야 된다면, 엄청 많은 컴포넌트를 위한 변수명이 존재할 것이라는 생각을 했다.
하지만 이번 강의를 듣고 나서 생각했을 때, vanill JS와와 react로 프로그래밍한 것에 대한 결과가 일치했을 때, react로 한 것이 엄청 효율적인 생산성을 보일 것 같다는 생각이 든다.
#Software Engineer #IRISH