함수의 인자를 props라 부른다
Props 알아보기!!
Properties 알아보기!!
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// props 배우기
// props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
//#1. props로 해결이 가능하게 될 문제들 겪어보기
//각각 버튼을 만들어 컴포넌트를 만들 것이다.
function SaveBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
Save Changes
</button>
);
}
function ConfirmBtn() {
// 함수형 컴포넌트
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
//위의 버튼 스타일을 복붙했는데, 그저 style을 복붙하는 것 대신에, 보다 좀 더 설정이 가능한 컴포넌트는 없을까? 이 모종의 설정들을 넘겨줄 수 있는 button 컴포넌트가 있다면 좋겠는걸 ??
//text만 다른데,, 이 모든 것을 다 갖고 있는 컴포넌트는 없을까? 2번이고 3번이고 복붙하게 되는데, 누군가가 이 디자인을 변경한다면 나는다시 되돌아가서 이 모든 버튼들을 변경 혹은 복붙해야되겠지..
>
Confirm
</button>
);
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn /> //컴포넌트의 내부
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
우리가 해야 할 일은 우리들의 컴포넌트를 좀 더 설정 가능하게끔 만드는 것이다 !!
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
//사람들은 함수의 인자이름을 props라고 부른다.
<script type="text/babel">
function Btn(props) {
// Btn({banana:"save changes"})
console.log(props);
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
{props.banana}
//banana라는 키 값을 넣어주면 버튼 내부의 text가 바뀐다.
</button>
);
}
function App() {
return (
//내가 원하는 것은 text를 재 설정 하는 것이다 !
//떠올려봐 우리가 html에서 어떻게 텍스트를 변경했지?
<div>
<Btn banana="Save Changes" x={false} />
<Btn banana="Continue" y={7} />
//Btn은 banana 키 값과 y 키값을 가진 함수가 된다.
</div>
); // Btn({banana:"save changes"})
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
short cut >> 지름길 !!
//props의 부분을 {}중괄호를 활용하면 편하다.
function Btn({banana}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
{banana}
//여기는 그냥 첫번째 인자인 banana로 바꿔준다!↑↑↑이것이 property를 오브젝트로 부터 꺼내는 방법
props는 오브젝트이고 우리는 props안에 banana가 있다는 사실을 알기 때문에 그냥 이렇게 할 수 있는 것이다.
props 기반으로 style 속성 풍부하게 사용해보기
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
//props는 더 많은 곳에서 이용할 수 있다.
<script type="text/babel">
function Btn({ text, big }) {
console.log(text, big);
return (
<button
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
fontSize: big ? 18 : 15,
//props 를 기반으로 style 안에서 if else를 사용할 수 있다.
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
//props 를 기반으로 style 안에서 if else를 사용할 수 있다. //그럼 우린 big
버튼과 일반 버튼을 갖게 된다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다