<!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, big}){ // Btn이라는 함수에 보내는 props
console.log({text, big});
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: big? 18 : 15
}}>{text}</button>
}
//함수형 컴포넌트
/*함수에 넣어둔 모든것을 컴포넌트의 첫번째 인자로 보냄*/
function App() {
return (
<div>
<Btn text="Save Changes" big={true}/>
<Btn text="Confirm" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>// memo
<!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 , changeValue}){
console.log(text,"was redered");
return <button
onClick = {changeValue} // onClick 이벤트 리스너
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize: 16
}}>{text}</button>
}
// 특정 요소를 re-render하지 않게 하기 위해 memo 사용
const MemorizeBtn = React.memo(Btn);
// 함수 안에 onClick함수 event listener가 아니라 단지 prop의 이름으로
// 하나의 인자로 보내짐 -> Btn 컴포넌트에서 다뤄야함
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<MemorizeBtn text={value} changeValue={changeValue}/>
<MemorizeBtn text="Continue" />
</div>
);
}
// 부모 컴포넌트에서 state(상태) 변경될 때 속해있는 모든 것을 re-render함
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
// propTypes 사용 - properties의 형식이 맞는지 , 필수요소인지 확인하고 경고띄워주는 기능
<!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/prop-types@15.8.1/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text , fontSize = 12}){ // 바로 기본값 지정 가능
return <button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10,
border: 0,
fontSize
}}>{text}</button>
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={16}/>
<Btn text={"Continue"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>'Dev > React' 카테고리의 다른 글
| [React] #6. useEffect (0) | 2022.05.27 |
|---|---|
| [React] #5. Intro- React App 만들기 (0) | 2022.05.27 |
| [React] #3.5 Inputs and State (0) | 2022.05.25 |
| [React] #3. State (0) | 2022.05.23 |
| [React] #2. The Basic of React - JSX (0) | 2022.05.23 |
