리액트는 UI 내에서 같은 작업을 반복할 때 이를 좀더 간편하게 처리해 준다.
다음 코드를 살펴보자
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- How to make browser read JSX syntax (using babel)-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ banana, big }) {
return <button
style={{backgroundColor:"tomato", color:"white", padding:"10px 20px", border:0, borderRadius:10, fontSize: big ? 18 : 16}}
>
{banana}
</button>
}
function App () {
return (
<div>
<Btn banana="Save Changes" big={true}/>
<Btn banana="Continue" big={false}/>
</div>
)
};
// find id="root" from document(HTML)
const root = document.getElementById("root");
// initial render
ReactDOM.render(<App />, root);
</script>
</html>여느때와 마찬가지로 initial render와 함께 시작하고 App 컴포턴트를 root 내에 담아준다.
그리고 App 컴포넌트는 Btn 컴포넌트를 두 번 작동시키는데,
이 때에 중요한 점은 인수를 안고 넘어간다는 것이다.
첫 Btn의 경우 banana라는 키에 Save Changes라는 값 그리고 big이라는 키에 true라는 값을 갖고 넘어가며,
이에 따라 버튼에 쓰여질 내용, 그리고 글씨 크기가 정해져 첫 버튼이 print된다.
그리고 두번째 Btn의 경우 banana라는 키에 Continue라는 값 그리고 big 이라는 키에 false라는 값을 갖고 넘어간다.
마찬가지로 이에 따라 버튼에 쓰여질 내용, 그리고 글씨 크기가 정해져 두 번째 버튼이 print된다.
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] Prop Types (0) | 2023.01.09 |
|---|---|
| [ReactJS] memo (0) | 2023.01.09 |
| [ReactJS] prop에 대한 이해 (0) | 2023.01.08 |
| [ReactJS] input, form (0) | 2023.01.07 |
| [ReactJS] React.useState() (0) | 2023.01.07 |
