*HARD WAY
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
//import ReactJS & ReactDOM
<script src="https://unpkg.com/react@17.0.2/umd/react.pro~"></script>
<script src="https://unpkg.com/react-dom@~"></script>
<script>
const root = document.getElementById("root");
const span = React.createElemet("span",
{id:"sexy-span" , style:{color:"red"}},
"I'm span");
//id와 같은 span의 property 지정 가능.
//그 다음으로 content
ReactDOM.render(span, root);
</script>
</html>
Empty div : ReactDOM이 React element를 가져다놓을 곳
ReactDOM에게 span을 root 안에 두라고 명령
-> 먼저 root를 가져와야함
-> 이제 ReactDOM에게 span을 root안에 render
JS를 통해 element를 생성하고고 reactJS가 그걸 HTML로 번역
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.pro~"></script>
<script src="https://unpkg.com/react-dom@~"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElemet("h3",
{onMouseeEnter: () => console.log("mouse enter")},
"I'm h3");
//id와 같은 span의 property 지정 가능.
//그 다음으로 content
const btn = React.createElemet("button", {
onClick: () => console.log('im clicked'), //이벤트 리스너 작성
}, "Click me");
const container = React.createElemet("div", null, {[h3, btn]})
ReactDOM.render(container, root);
</script>
</html>
ReactDOM은 container element를 root div안에 render
HTML 선택하고 event 등록
하나의 statement로 props에서 event까지 선언 가능
on~ : Eventlistener
EASIER WAY ; JSX
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.pro~"></script>
<script src="https://unpkg.com/react-dom@~"></script>
<script>
const root = document.getElementById("root");
function Title() {
return (
<h3 img src="" id = "title" onMouseEnter={()=>console.log("Mouse Enter")}>
Hello I'm a title </h3>
);
}
const Button = () => (
<button
style={{backgroundColor: "tomato"}}
onClick = {() => console.log('im clicked')}>
Click me </button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container, root);
</script>
</html>
state ; Rendering
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.pro~"></script>
<script src="https://unpkg.com/react-dom@~"></script>
<script>
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
ReactDOM.render(<Container/>, root); //UI 업데이트-> 리렌더링
}
const Container = () => (
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
//시작될 때 렌더링
ReactDOM.render(<Container/>, root);
</script>
</html>
function render() 생성하면 더 깔끔함
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.pro~"></script>
<script src="https://unpkg.com/react-dom@~"></script>
<script>
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render();//UI 업데이트-> 리렌더링
}
function render(){
ReactDOM.render(<Container/>, root);
}
const Container = () => (
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
//시작될 때 렌더링
render();
</script>
</html>
JSX를 사용하면 매우 편하게 UI 렌더링 가능
*setState
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App(){
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter+1);
};
return(
/*사용자가 보게 될 컴포넌트*/
<div>
<h3>Total clicks : {counter}</h3>
<button onClick = {onClick}> Click me </button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
</html>
사용자는 return 안에 있는 컴포넌트를 보게 된다.
state를 바꿀 때 setState 사용 , 새로운 값을 가지고 리렌더링을 일으킨다
console.log 찍어보면
위와 같이 계속해서 렌더링(리렌더링) 됨.
*modifier 함수로 state를 바꿀 때 App 컴포넌트 전체가 재실행됨.
return도 한번 더 실행되지만 새로운 값을 가지고 실행됨
새로운 이벤트리스너를 추가하는게 아님!
state functions
const onClick = () => {
// setCounter(counter + 1);
//현재 값을 바탕으로 다음 값 업데이트 -> 함수 사용
setCounter((current) => current+1); //current가 현재 값이라는걸 보장
};
Converter 만들기
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App(){
//데이터, 데이터 수정하기 위한 함수
const [amount, setAmount] = React.useState(); //데이터도 얻고 업데이트도 진행
//flipped : boolean형 변수
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => { //데이터 업데이트 하는 역할
setAmount(event.target.value);
}
const reset = () => setAmount(0);
//현재의 반대값을 리턴하는 함수
const onFlip = () => {
reset();
setFlipped((current) => !current);
};
return(
/*사용자가 보게 될 컴포넌트*/
<div>
<h1 className="h1">Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value = {flipped ? amount * 60 : amount} //외부에서도 값을 수정할 수 있게 하기 위해.
id = "minutes"
placeholder="Minutes"
type="number"
onChange = {onChange} //이벤트 리스닝, input에 변화가 생기면 업데이트
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value = {flipped ? amount : Math.round(amount / 60)}
id = "hours"
placeholder="Hours"
type="number"
//flipped의 디폴트값은 false.
//flipped가 false이면 내 hours는 disabled 되어야 함
disabled={!flipped}
onChange = {onChange}
/>
</div>
<button onClick = {reset}>Reset</button>
<button onClick = {onFlip}>Flip</button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
</html>
upgraded ver.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours(){
const [amount, setAmount] = React.useState(); //데이터도 얻고 업데이트도 진행
//flipped : boolean형 변수
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => { //데이터 업데이트 하는 역할
setAmount(event.target.value);
}
const reset = () => setAmount(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} //이벤트 리스닝, input에 변화가 생기면 업데이트
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value = {flipped ? amount : Math.round(amount / 60)}
id = "hours"
placeholder="Hours"
type="number"
//flipped의 디폴트값은 false.
//flipped가 false이면 내 hours는 disabled 되어야 함
disabled={!flipped}
onChange = {onChange}
/>
</div>
<button onClick = {reset}>Reset</button>
<button onClick = {onFlip}>Flip</button>
</div>
);
}
function KmToMiles(){
return <h3>KM 2 M</h3>;
}
function App(){
const [index, setIndex] = React.useState("df"); //초기값 설정
const onSelect = (event) => {
setIndex(event.target.value);
}
return(
/*사용자가 보게 될 컴포넌트*/
<div>
<h1>Super Converter</h1>
<select value = {index} onChange={onSelect}>
<option value="df"> Please select your units </option>
<option value="0"> Minutes & Hours </option>
<option value="1"> Km & Miles </option>
</select>
<hr/>
{index === "df" ? "Please select your units" : null}
{index === "0" ? <MinutesToHours/> : null}
{index === "1" ? <KmToMiles/> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
'FE > React & TS' 카테고리의 다른 글
[REACT] component / state / useEffect (0) | 2023.05.08 |
---|---|
[REACT] create-react-app (0) | 2023.05.08 |
[REACT] propTypes (0) | 2023.05.08 |
[REACT] Component (0) | 2023.02.07 |
[REACT] JSX (0) | 2023.02.07 |