티스토리 뷰
728x90
1. 클릭해서 콘솔에 나오는 것을 확인해보자. 바닐라js 했던 것을 그대로
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click me</button>
</body>
<script>
const button = document.getElementById("btn");
function handleClick() {
console.log("i have been clicked");
}
button.addEventListener("click", handleClick);
</script>
</html>
2. 클릭 되는 것을 업데이트 해보자- 여기까지는 바닐라거..
<!DOCTYPE html>
<html>
<body>
<span> Total click: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0; // 0 부터 시작한다
const button = document.getElementById("btn");
const span = document.querySelector("span"); // 위의 span 을 가져와서 씀
function handleClick() {
counter = counter + 1; //클릭할 때마다 하나씩 up
span.innerText = `Total clicks: ${counter}`; // span의 글씨 넣어줌
}
button.addEventListener("click", handleClick);
</script>
</html>
3. 리엑트를 알아보자 - 다음에서 더 쉽게 바꿀거지만 일단 어떻게 작동하는지를 알아본다.
<!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:"1span", style: {color:"red"}}, "Hello I'm a span"
); // id는 아무렇게나 지어도 됨.
ReactDOM.render(span, root); //리엑트랑 연결되어서 가져옴
</script>
</html>
4. 그 다음으로 디벨롭 해보자. 바닐라는 더 쉽게 사용할 수 있게 리엑트에서 왠만한건 다 가져올 수 있다.
<!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",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a span");
const btn = React.createElement("button",
{
onClick: () => console.log("im clicked"),
},
"click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
5. jsx 로 변환해보기 - babel 에서 자동변환해주는 것을 가져와서 더 간단한 코드로 사용이 가능하다
<!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@7.24.5/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 span </h3>
const Button =
<button style={{backgroundColor: "tomato",}}
onClick = {() => console.log("im clicked")}>
Click me</button>
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>
6. 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@7.24.5/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 span </h3>
const Button = () => // ()=> 이 함수로 만들어주는 것과 같다
<button style={{backgroundColor: "tomato",}}
onClick = {() => console.log("im clicked")}>
Click me</button>
const Container = () => (
<div>
<Title />
<Button />
</div>
); // <~~/> 이 함수를 받는 표식이 됨
ReactDOM.render(<Container />, root);
</script>
</html>
7. 함수를 다르게 쓸 수 있다.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUP() {
counter = counter + 1;
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3> Total clicks: {counter}</h3>
<button onClick={countUP}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
</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@7.24.5/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUP() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
function Container () {
return (
<div>
<h3> Total clicks: {counter}</h3>
<button onClick={countUP}>Click me</button>
</div>
);
}
render();
</script>
</html>
8. 직접 리렌딩 했지만 진행한 것을 지우고 자동으로 리렌더링 하기
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
//setCounter((current) => current +1); 와 같다
};
return (
<div>
<h3> Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
반응형
'React (Javascript) 공부' 카테고리의 다른 글
| 24.05.22_TIL React (리엑트) _ 5. 영화사이트 만들기 (React Router)+깃허브 배포 (0) | 2024.05.22 |
|---|---|
| 24.05.21_TIL React (리엑트) _ 4. to-do-list, Coin Tracker, Movie site (0) | 2024.05.21 |
| 24.05.20_TIL React (리엑트) _ 3. useEffect & Cleanup function (0) | 2024.05.20 |
| 24.05.17_TIL React (리엑트) _ 2. npm 실행, 버튼 만들기 (0) | 2024.05.17 |
| 24.05.17_TIL React (리엑트) _ 1. 함수변경 (분, 시를 변경해보자), props (0) | 2024.05.17 |