4.0 Props
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script 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 Btn(props) {
// Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
// function Btn({text, big}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: props.big ? 18 : 16,
}}
>
{props.text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Btn" big={true} />
<Btn text="Confirm Btn" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
4.1 Memo
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script 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 Btn(props) {
// Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
// function Btn({text, big}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음
console.log(props.text, 'was rendered')
return (
<button
onClick={props.onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: 10,
}}
>
{props.text}
</button>
);
}
// 재사용된 컴포넌트중 props 가 변경되지 않은것은 재렌더링 되지않게끔 도와줌
// 부모에 state가 변동이 될시 부모에 모든 자식들이 재렌더링 되는것을 방지
const MemorizedBtn = React.memo(Btn)
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<MemorizedBtn text={value} onClick={changeValue} />
<MemorizedBtn text="Confirm Btn" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
4.2 Prop Types
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, fontSize = 14 }) { // = 14 기본값 지정 props로 전달되지않으면 기본값 14가 주어짐
// Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
// function Btn({text, fontSize}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음(ES6부터)
// function Btn(props) || function Btn({text, fontSize})
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize,
}}
// fontSize는 변수지만 실제 button의 property명과 동일함으로 바로 써줘도 인식함
// ex) fontSize: fontSize === fontSize
>
{text}
</button>
);
}
// prop-types package
// props의 타입을 지정해 벨리데이션해주는 기능
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number
// fontSize: PropTypes.number.isRequired -> isRequired 무조건 있어야하는 props
}
// 재사용된 컴포넌트중 props 가 변경되지 않은것은 재렌더링 되지않게끔 도와줌
// -> 부모에 state가 변동이 될시 부모에 모든 자식들이 재렌더링 되는것을 방지
// const MemorizedBtn = React.memo(Btn)
// <MemorizedBtn text={value} />
// <MemorizedBtn text="test" />
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} fontSize={25} />
<Btn text={12} fontSize={"t"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
4.3 Recap
정리
- Prop
- 컴포넌트에 선언된 props에 Data Type을 지정하여 정의
- PropType
- 컴포넌트에 선언된 props에 Data Type을 지정하여 정의
- isRequired를 통해 필수값 정의
