아주 간단하게 리액트를 사용해보려고 한다!
자바스크립트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>내가 좋아하는 과일</title>
<style>
body {
text-align: center;
}
.main img {
border: 1px solid black;
width: 500px;
height: 380px;
}
button {
position: relative;
top: -15px;
right: 500px;
}
.like {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: 1px solid pink;
}
.like img {
width: 150px;
}
</style>
</head>
<body>
<h1>내가 좋아하는 과일</h1>
<div class="main">
<img src="https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg" alt="사과 1개" />
<button>🤍</button>
</div>
<h1>❤️</h1>
<ul class="like"></ul>
</body>
</html>| 실행화면
여기서 자바스크립트를 이용하여 저 하트 버튼을 누르면!
1. 한 개 있는 사과 사진에서 사과가 잔뜩 있는 사진으로 바뀜
2. 하트 버튼이 빨간색으로 바뀜
3. 하트 버튼을 누른 사진이 ❤️ 아래 영역에 추가됨
// 버튼 찾기
const button = document.querySelector("button");
// 버튼에 이벤트 추가하기
button.addEventListener("click", () => {
// 이미지 찾기
const appleImg = document.querySelector("img");
// 이미지의 속성 변경하기
appleImg.src = "http://www.outdoornews.co.kr/news/photo/202009/32077_90504_551.jpg";
// 버튼 하트 바꾸기
button.innerHTML = "❤️";
// ❤️ 영역 찾기
const like = document.querySelector(".like");
// ❤️ 영역에 들어갈 이미지 생성하기
const newLikeImg = document.createElement("img");
newLikeImg.src = "http://www.outdoornews.co.kr/news/photo/202009/32077_90504_551.jpg";
// li 태그 만들기
const li = document.createElement("li");
// li 태그 안에 이미지 넣기
li.appendChild(newLikeImg);
// ❤️ 영역 안에 li 넣기
like.appendChild(li);
});
이렇게 작성했다.
| 실행화면
음 ... 되긴 했는데 굉장히 querySelector를 자주 쓰게 되고 자꾸 element를 만들고 append 하고...
코드가 깔끔하지 않고 복잡해보인다!
리액트로 바꾸기
리액트를 사용하기 전에,
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>위 코드를 추가해주어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>내가 좋아하는 과일</title>
<style>
body {
text-align: center;
}
.main img {
border: 1px solid black;
width: 500px;
height: 380px;
}
button {
position: relative;
top: -15px;
right: 500px;
}
.like {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: 1px solid pink;
}
.like img {
width: 150px;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script>
const mainTitle = <h1>내가 좋아하는 과일</h1>;
const main = (
<div class="main">
<img src="https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg" alt="사과 1개" />
<button>🤍</button>
</div>
);
const likeTitle = <h1>❤️</h1>;
const like = <ul class="like"></ul>;
const app = (
<div>
{mainTitle}
{main}
{likeTitle}
{like}
</div>
)
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
</script>
</body>
</html>html 코드를 변수로 바꾸면서 html 코드를 다 지웠다.
마지막에 ReactDOM.render()는
ReactDOM.render(그리고 싶은 컴포넌트, 컴포넌트 그릴 곳);
이러한 형식으로 쓰였다.
또 리액트에서, 자바스크립트 문법은 {} 안에 쓰면 된다.
앗 !
이렇게 하면 될 줄 알았는데...
Uncaught SyntaxError: Unexpected token '<'
브라우저가 < 를 이해하지 못한 듯 하다.
이럴 때!!!
Babel
새 시대의 자바스크립트를 위한 컴파일러 (통역사)로, 브라우저가 이해할 수 있는 자바스크립트로 변환해준다.
Babel 사용하기
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>위 <script> 태그를 넣은 뒤, script type을 지정해주어야 한다.
<script type="text/babel">
const mainTitle = <h1>내가 좋아하는 과일</h1>;
const main = (
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
const likeTitle = <h1>❤️</h1>;
const like = <ul class='like'></ul>;
const app = (
<div>
{mainTitle}
{main}
{likeTitle}
{like}
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
</script>어떻게 변환되나?
자바스크립트 코드를 입력하면 어떻게 변환되는지 보여준다.
더 자세히 보려면 콘솔 창을 열어 <head> 태그 부분을 보면 된다.
짜잔! Bable을 통해 자바스크립트 코드가 이렇게 변환된다.
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>내가 좋아하는 과일</title>
<style>
body {
text-align: center;
}
.main img {
border: 1px solid black;
width: 500px;
height: 380px;
}
button {
position: relative;
top: -15px;
right: 500px;
}
.like {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: 1px solid pink;
}
.like img {
width: 150px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const mainTitle = <h1>내가 좋아하는 과일</h1>;
const main = (
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
const likeTitle = <h1>❤️</h1>;
const like = <ul class='like'></ul>;
const app = (
<div>
{mainTitle}
{main}
{likeTitle}
{like}
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
</script>
</body>
</html>
| 실행화면
원래는 에러로 아무것도 뜨지 않았는데 babel 까지 적용해주니 잘 뜨는 것을 알 수 있다.
만들면서 배우는 리액트: 기초
위 강의를 참고하여 정리했습니다!
