REACT
리액트4 props 컴포넌트 재사용 propTypes
9400
2023. 9. 11. 15:27
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//Btn 컴포넌트 생성, 인자로 text와 big을 받아 button을 생성함.
function Btn({ text, big }) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 18 : 15
}}>{text}</button>
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} /> //props인자들
<Btn text="Continue" big={false} /> //props인자들
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>props 는 부모컴포넌트로부터 자식컴포넌트에 데이터를 보낼수 있게 해주는 방식(인자)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, onClick }) {
console.log(text, "렌더링")
return <button
onClick={onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: 16
}}>{text}</button>
}
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} /> //이 onClick은 prop일뿐 이벤트 리스너가 아님
<MemorizedBtn text="Continue" />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>버튼 변경 및
React.memo()를 사용하였음.
React.memo는 고차 컴포넌트(Higher Order Component)
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> -->
<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.production.min.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 = 10 }) { //fontSize의 default값을 10으로 설정
console.log(text, "렌더링")
console.log(fontSize,"fontSize")
return <button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize
}}>{text}</button>
}
const MemorizedBtn = React.memo(Btn);
MemorizedBtn.propTypes = { //propTypes 설정
text: PropTypes.string.isRequired, //text는 string타입이여야 하며 반드시 존재해야함
fontSize : PropTypes.number, //fontSize는 number타입이여야 하며 반드시 존재하지 않아도 됨
}
function App() {
return (
<div>
<MemorizedBtn text="Save Changes" fontSize={30} />
<MemorizedBtn text={"Continue"} />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>
컴포넌트.propTypes을 이용
컴포넌트의 속성(props)에 대한 유효성 검사를 수행하는 데 사용되는 기능입니다. propTypes를 정의하면 해당 컴포넌트가 받아야 하는 속성의 유형과 필수 여부를 명시할 수 있습니다. 이를 통해 개발자가 컴포넌트를 사용할 때 올바른 속성을 전달하는지 확인할 수 있습니다.
올바르지 않은 속성을 명시할경우, 개발자 콘솔에서 경고메세지가 표시됨.