<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello im title
</h3>
);
const Button = () => (
<button
onClick={() => {
console.log("im clicked");
}}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
리액트 컴포넌트 안에서 어떻게 데이터를 바꾸는가?
변수를 선언해주고 매번 명시적으로 html을 리렌더링 해 주어야 한다.
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0; // -> 밑에서 바로 {}를 이용해 변수를 html에 넣어줄 수 있다.
function countUp(){
counter += 1; // 변수를 바꿔준 다음
render(); // 계속 명시적으로 리렌더링을 해 주어야 한다.
}
function render() { // 렌더링해주는 함수
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick = {countUp}>Click Me</button>
</div>
);
render(); // 처음 렌더링
</script>
state를 변경하는 첫 번째 방법 : 직접 할당. 현재 값을 이용해서 다음 값을 계산해 내지만 안전하지 않다.
modifier 함수를 사용해 state, 즉 어플리케이션의 데이터를 바꿀 때, 컴포넌트는 새 값을 가지고 자동적으로 렌더링된다.
<aside> 💡 modifier 함수를 이용해 state를 변경할 때, 컴포넌트가 새로운 값을 가지고 리렌더링된다. 즉 다시 실행된다. 하지만 변경된 부분만 변경된다!
</aside>
modifier 적용 후 → 잘 돌아간다!
<script type="text/babel">
const root = document.getElementById("root");
const App = () => {
let [counter, setCounter] = React.useState(0); // 1. 초기값이 0인 변수 counter와 이를 변환해 줄 modifier 함수 setCounter
const onClick = () => { // 2. 밑에서 onClick 이벤트가 발생하면 이 이벤트 리스너가 호출
setCounter(counter + 1); // 3. counter의 값을 변환해주고 그 값을 적용해 html도 리렌더링 해줌
}
// console.log("render") // 클릭 시 매번 실행된다.
// console.log(counter) // 컴포넌트가 항상 리렌더링되므로
return (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick = {onClick}>click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
state를 변경하는 또 다른 방법 : 함수를 할당. 현재 값을 이용해서 현재 값을 계산해 내는 것