function Btn(props) {} 이런식으로 함수를 만들면 이 녀석은 Btn이라는 컴포넌트가 된다.
App() 안에 Btn 컴포넌트를 넣고 렌더링한다고 했을 때 App()은 부모 요소이다.
부모로부터 자식 컴포넌트에 데이터를 전달하는 방법이 props를 활용하는 것이다.
위의 짤과 같이 <Btn 머시기 저시기 /> 로 부모 요소 안에 자식 요소를 넣으면 Btn() 함수의 첫번째 인자에 머시기 저시기가 자바 오브젝트 형태로 들어가게 된다. (위의 짤은 console.log(props)를 한 것이다.
<!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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<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/babel.min.js"></script>
<script type="text/babel">
function Btn(props) {
console.log(props);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
}}
>
{props.banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana='Save Changes' x={false} />
<Btn banana='Continue' />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>props 안에 자바 오브젝트 형식으로 값이 들어가 있다는 걸 알았기 때문에 {props.banana}의 키로 값을 불러올 수 있다는 것 또한 알 수 있다. 이렇게 코드를 만들면 하나의 Btn()이라는 함수를 가지고 여러개의 형태로 재사용할 수 있게 된다.
이 코드를 더 줄이면 이렇게 쓸 수 있다.
<!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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<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/babel.min.js"></script>
<script type="text/babel">
function Btn({ text }) {
console.log(text);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text='Save Changes' />
<Btn text='Continue' />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>btn 의 첫번째 인자인 props가 오브젝트 형태인 것을 알기 때문에 첫번째 인자 안의 키 값을 바로 꺼내서 쓸 수 있다.
<!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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<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/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, big }) {
console.log(text);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: big ? 20 : 16,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text='Save Changes' big={true} />
<Btn text='Continue' />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>이렇게 인자를 여러개 쓸 수도 있다.
PropTypes라는 스크립트를 사용하면 이렇게 proptype을 설정하여 타입이 틀렸음을 알려줄 수 있다.
<!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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script
src="https://unpkg.com/react@17.0.2/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/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script type="text/babel">
function Btn({ text, fontSize = 16 }) {
console.log(text);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: { fontSize },
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};
function App() {
const [] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text='Save Changes' fontSize={18} />
<Btn text={18} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>Btn의 propTypes를 설정.
text라는 prop은 string이 들어가야 하며, required로 설정.
fontSize라는 prop은 number가 들어가야 하고 optional(default) 설정.
'취업 준비 > React' 카테고리의 다른 글
| 8. useEffect (0) | 2022.03.18 |
|---|---|
| 7. create-react-app (0) | 2022.03.17 |
| 5. 컴포넌트 조합하기 (0) | 2022.03.08 |
| 4. State 예제 - 시/분 변환기 (0) | 2022.03.05 |
| 3. State와 reRendering (0) | 2022.03.04 |
