4.0 Props
2022. 9. 14. 16:22ㆍReact/ReactJS로 영화 웹 서비스 만들기
다음과 같이 두개의 버튼을 style을 입혀 작성해보았다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function SaveBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
Save Changes
</button>
)
}
function ConfirmBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
Confirm
</button>
)
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
그런데 두개의 버튼을 다르게 만드려고 하는데 이를 더 간단하게 만들어보자!
버튼으로 컴포넌트를 만들고, 텍스트만 바꾸도록 만들어보자.
그럼 다음과같이 banana(바꿔도 상관없음)를 주면,
props로 전달시켜주면
다음과 같이 두개의 object를 콘솔에 찍어내게 된다.
왜냐하면 두개의 버튼을 렌더링 했기 때문에
그럼 다음과 같이 설정하게 된다면, 버튼의 이름도 정상적으로 출력됨을 알 수 있다.
{props.banana}귀찮다면 이전과 다르게 다음과 같이 할 수도 있다.
다음과 같이 두개의 인자도 전달이 가능하다.
폰트스타일과같이 style에서도 조건문을 둘 수 있다.
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 4.2 Prop Types (2) | 2022.09.15 |
|---|---|
| 4.1 Memo (0) | 2022.09.14 |
| 3.9 Final Practice and Recap (0) | 2022.09.14 |
| 3.8 Recap (0) | 2022.09.14 |
| 3.7 State Practice part Two (0) | 2022.09.14 |