Props
Props는 부보 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.
컴포넌트들을 좀 더 설정 가능하게끔 만드는 것이 필요하다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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, big }) {
//버튼으로부터 전달받는 인자 props, Btn이 전달받는 유일한 인자
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 18 : 16,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Countinue" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<App />);
</script>
</html>
하나의 Btn컴포넌트를 사용하지만 버튼들은 App 컴포넌트에 의해 설정되고 있다. 그래서 ui가 다른 걸 볼 수 있음. 재사용 가능하다!
Memo
부모 컴포넌트가 상태를 변경할 때 어떤 일이 일어나는지 알아보자.
리액트한테 이 컴포넌트가 다시 크려지는 것을 원치 않다고 말해주는 React Memo를 할 수 있다. Props가 변경되지 않는 선에서 다시 랜더링을 할지 말지 정할 수 있다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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 }) {
//버튼으로부터 전달받는 인자 props, Btn이 전달받는 유일한 인자
return (
<button
onClick={onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{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} />
{/*이건 이벤트리스너가 아님 그냥 props이다.*/}
<MemorizedBtn text="Countinue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<App />);
</script>
</html>
여기서 changeValue Btn은 바뀌는데 Continue Btn은 바뀌지 않는다 이때 Continue Btn은 리랜더링 하지 않도록 memo 해주는것이다.
부모 states가 변경이 있다면 모든 자식들은 리랜더링된다. 그리고 이게 추후에 어플리케이션이 느려지는 원인이 될 수 있다. Memo를 사용해서 제어할 수 있다는 것을 알아 두면 좋다.
Prop Types
https://unpkg.com/react@17.0.2/umd/react.development.js
오류가 나지 않았는데 이걸로 src를 수정했더니 오류가 나는 걸 볼 수 있었다.
컴포넌트가 props을 정확하게 가지고 render될 것이라고 확실하게 하고 싶다면 .isRequired 라고 붙여주면 된다.
<!DOCTYPE html>
<html>
<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@18/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 = 16 }) {
//버튼으로부터 전달받는 인자 props, Btn이 전달받는 유일한 인자
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired, //택스트를 필수로 만든다
fontSize: PropTypes.number,
};
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text={"continue"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<App />);
</script>
</html>
일단 해보자고