<!DOCTYPE html>
<html lang="en">
<body>
<!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
<div id="root"></div>
</body>
<!-- import React -->
<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">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
// UI에 클릭 수 반영하기 위해 다시 rendering
// 데이터를 바꿀 때마다 계속 다시 rendering 해야 하므로 좋지 않는 방법
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>click me</button>
</div>
);
render();
</script>
</html>
클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render())
JSX 환경에서 {}안에 JS코드 삽입 가능
react vs vanilla
react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음
더 간단한 방법
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
<div id="root"></div>
</body>
<!-- import React -->
<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">
const root = document.getElementById("root");
function App() {
// [state, modifier] state는 타겟 데이터
const [counter, setCounter] = React.useState(0); // -> 리스트, 초기 counter 값 0
const onClick = () => {
// setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender)
setCounter(counter + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
const onClick = () => {
// setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender)
// setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능
// 확실하게 현재 값을 바탕으로 modify하는 코드
setCounter((current) => current + 1);
};
modifier함수에 값을 직접 넣을 수도 있지만, 함수를 넣을 수도 있다
// 화살표 함수
// 매개변수 없는 경우
const func = () => console.log('hi');
// 매개변수 1개
const func = x => x;
// 매개변수 여러개
const func = (a, b) => a + b;
// 화살표 이후 여러 줄 일때 {} 사용
// {} 사용 시 값을 반환할 때 return 필수
// {} 사용 시 return 쓰지 않으면 undefined 반환
분 -> 시 변환기
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
<div id="root"></div>
</body>
<!-- import React -->
<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">
const root = document.getElementById("root");
function App() {
const [minutes, setMinutes] = React.useState(0);
// js 처럼 event를 인자로 받아 input 값 저장
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
return (
<div>
<h1>Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
// state와 연결하면 input 태그 밖에서도 value 수정 가능함
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
// 데이터 업데이트
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">hours</label>
<input
value={minutes / 60}
id="hours"
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
class 대신 className, for 대신 htmlFor 처럼 다른 용어 사용하기도 함 (js가 선점)
초깃값(0)으로 렌더링 -> input값 바뀌면 onChange() -> minutes 값 업데이트 -> 다시 렌더링
