✅ 컴포넌트!⭐⭐
컴포넌트는 함수의 개념을 통해서 원하는 html 코드를 묶어서 가져올 수 있음을 말한다. 응용하면 여러가지 기능을 입힐 수 있다. 컴포넌트 사용에 대한 구조는 다음과 같다.
Index.js {
App.js {
Dice.js {
* 이미지 파일 등의 html 태그
}
}
}Dice.js
import diceBlue01 from './assets/dice-blue-1.svg';
function Dice() {
return <img src={diceBlue01} alt="주사위" />;
}
export default Dice;App.js
import Dice from "./Dice";
function App() {
return (
<div>
<Dice />
</div>
)
}
export default App;index.js
import ReactDOM from "react-com";
import App from "./App";
ReactDOM.render(
<App />,
document.getElementById("root");
);결과물
☑️ 가위바위보 프로젝트 진행 3
이미지 다운로드 링크는 없음 ㅎㅅㅎ
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>가위바위보</title>
<style>
body {
background-color: #40089a;
color: #fff;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>index.js
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));App.js
import HandIcon from "./HandIcon";
function App() {
return (
<div>
<HandIcon />
</div>
)
}
export default App;HandIcon.js
// 여기에 코드를 작성하세요
import img from "./assets/rock.svg"
function HandIcon() {
return <img src={img} alt="가위바위보 아이콘" />
};
export default HandIcon;
필요하다면 공부하는 개발자, 한승준