티스토리 뷰
React (Javascript) 공부
24.05.17_TIL React (리엑트) _ 1. 함수변경 (분, 시를 변경해보자), props
티아(tia) 2024. 5. 17. 19:47728x90
1. 분을 시로 바꾸어보자 - 먼저 분이 잘 출력되는지 확인한다.
<!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@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.24.5/babel.min.js"></script>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
};
return (
<div>
<h1 className="hi"> Super Converter </h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4> You want to convert {minutes} </h4>
<label htmlFor="hours">Hours</label>
<input placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
안돼면 script 바꿔주기
<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>
2. 분을 시로 바꾸어보자.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
};
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={minutes / 60}
// value={Math.round(minutes / 60)} 으로 하면 소수점 없이 반올림해줌
id="hours"
placeholder="Hours"
type="number"
/>
</div>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)}
id="hours"
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
3. 바꾸어서 시를 분으로 바꾸어보자.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function App() {
const [amount, setMinutes] = React.useState();
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
const onFlip = () => {
reset();
setFlipped((current) => !current); //!는 반대
};
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
// ? 는 ~가 된다면
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
- 버튼을 누르면 뒤로가기로 바꿀 수 있다.
<button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
4. 킬로미터로 바꾸는 것도 추가해서 선택해 계산해 볼 수 있도록 하자
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours() {
const [amount, setMinutes] = React.useState();
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
const onFlip = () => {
reset();
setFlipped((current) => !current); //!는 반대
};
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
</div>
);
}
function KmToMiles() {
return (
<div>
<h1 className="hi"> Km To Miles </h1>
</div>
);
}
function App() {
const [index, setindex] = React.useState("0");
const onSelect = (event) => {
setindex(event.target.value);
};
return (
<div>
<h1 className="hi"> Super Converter </h1>
<select value={index} onChange={onSelect}>
<option value="0">Minutes To Hours</option>
<option value="1">Km To Miles</option>
</select>
<hr/>
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
5. 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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function SaveBtn() {
return <button>Save Changes</button>;
}
function ConfirmBtn() {
return <button>Confirm</button>;
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
처음에는 좀 못생긴 버튼이 생성된다. 이제 조금 이쁘게 만들어보자.
<script type="text/babel">
function SaveBtn() {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>Save Changes</button>;
}
이걸 여러 버튼에 적용하려면 다르게 해주어야 한다.
<img src="" >해주었던 것처럼 정의를 내려준다.
function App() {
return (
<div>
<Btn banana= "SaveBtn" />
<Btn banana= "ConfirmBtn" />
</div>
);
이런식으로 넣어주려고 한다.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function Btn(props) { //props 는 언제나 하나만 받을 수 있다.
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{props.banana}
</button>;
}
function App() {
return (
<div>
<Btn banana= "SaveBtn" />
<Btn banana= "ConfirmBtn" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
조건도 다르게 줄 수 있다.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function Btn({banana, big}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 20 : 10,
}}>
{banana}
</button>;
}
function App() {
return (
<div>
<Btn banana= "SaveBtn" big={true}/>
<Btn banana= "ConfirmBtn" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
6. 버튼을 클릭할 수 있는 것으로 바꾸기
클릭하면 이름이 바뀌는 것부터 만들어보자.
<!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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function Btn({banana, onClick_1}) {
return <button
onClick={onClick_1}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{banana}
</button>;
}
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Change");
return (
<div>
<Btn banana= {value} onClick_1={changeValue}/>
<Btn banana= "ConfirmBtn"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
두개의 버튼이 모두 렌더링 되는게 아니라 하나의 버튼이 바뀔 때에만 렌더링을 하고 싶을 때 console.log 를 해서 나오는 것을 보자.
momo를 이용하여 바뀐 것만 렌더링해 log를 찍어 보여주는 것을 볼 수 있다.
function Btn({banana, onClick_1}) {
console.log(banana, "tt")
return <button
onClick={onClick_1}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{banana}
</button>;
}
const MemorizedBtn = React.memo(Btn);
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Change");
return (
<div>
<MemorizedBtn banana= {value} onClick_1={changeValue}/>
<MemorizedBtn banana= "ConfirmBtn"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
7. 실수 했을 때 console 로 확인하는 방법
잘못 입력을 했는데도 에러가 안뜨는 것을 볼 수 있다.
이럴 때 협업하면 에러를 찾아야 할 때 힘들다.
에러를 자동으로 console로 보여줄 수 있게 세팅해보자.
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<!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@17.0.2/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@7.24.5/babel.min.js"></script>
<script type="text/babel">
function Btn({banana, fontSize}) {
return <button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}>
{banana}
</button>;
}
Btn.propTypes = {
banana: PropTypes.string,
fontSize: PropTypes.number,
}
function App() {
return (
<div>
<Btn banana="Save Changes" fontSize={18}/>
<Btn banana={14} fontSize={"tt"}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
이렇게 되면 에러메세지는 띄워주는 것을 볼 수 있다.
만약 하나라도 안 썼을 때에도 에러가 뜨게 해주고 싶으면 isRequired 옵션을 넣어주면 된다.
Btn.propTypes = {
banana: PropTypes.string,
fontSize: PropTypes.number.isRequired,
}
function App() {
return (
<div>
<Btn banana="Save Changes" fontSize={18}/>
<Btn banana="ff"/>
</div>
);
}
반응형
'React (Javascript) 공부' 카테고리의 다른 글
| 24.05.22_TIL React (리엑트) _ 5. 영화사이트 만들기 (React Router)+깃허브 배포 (0) | 2024.05.22 |
|---|---|
| 24.05.21_TIL React (리엑트) _ 4. to-do-list, Coin Tracker, Movie site (0) | 2024.05.21 |
| 24.05.20_TIL React (리엑트) _ 3. useEffect & Cleanup function (0) | 2024.05.20 |
| 24.05.17_TIL React (리엑트) _ 2. npm 실행, 버튼 만들기 (0) | 2024.05.17 |
| 24.05.14_TIL React (리엑트) _ 0. 기초 html (0) | 2024.05.15 |