<HTML 코드>
참고로 여기 코드는 node.js를 사용하지 않을 때라서 props를 사용할려면 맨 아래script처럼 해당 링크를 불러와야한다.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="root"></div>
<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 src="ttps://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
</body>
</html><ReactJS 코드>
<script type="text/babel">
// props는 전달받는 첫번째이자 유일한 인자 및 오브젝트이다. 보내는 모든 정보들은 단 하나의 props로 저장되어 보내진다.
function Btn({ text, fontSize = 12 }) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
/* 혹여나 보내는 props들의 type이 정해져있는데 실수로 다른 type으로 보내는 것을
방지하기 위해서 원하는 type으로 아래와 같이 설정해두면 해당 type으로 안할시
경고문구가 뜬다. isRequired의 경우는 필수적으로 값을 보내야하는 prop의 경우
잊지말고 보내도록 실수로 안보냈을 때 경고문구가 뜨도록 한 것! */
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};
/* 아래를 통해 원래의 Btn에 대해 기억을 했다가 일부 값을 바꾸게 될 때
App이라는 부모의 일부가 바뀌었다고 App 전체를 리렌더링하는 경우가 생기는데,
이를 방지한다. 즉 전체 App이 아니라 바뀌는 MemorizedBtn만 다시 리렌더링 되는것!
현재는 별 필요가 없어보여도 컴포넌트가 매우 많은 경우 시간 등의 비효율성을 줄일 수 있다.
*/
const MemorizedBtn = React.memo(Btn);
// 이런 식으로 일부분만 바꿀 props들을 설정함으로써 코드의 중복을 막을 수 있다.
function App() {
return (
<div>
<MemorizedBtn text="Save Changes" fontSize={18} />
<MemorizedBtn text={"Continue"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>'ReactJS' 카테고리의 다른 글
| [React] 컴포넌트와 렌더링 (0) | 2022.11.30 |
|---|---|
| [React] ref란? (feat. DOM API를 쓰면 안되는 이유) (0) | 2022.11.30 |
| [ReactJS] useEffect, Cleanup (0) | 2022.10.07 |
| [ReactJS] 리액트로 분/시간, Km/Miles 변환기 만들기 (0) | 2022.10.05 |
| [ReactJS] useState (0) | 2022.09.26 |