#3.0 – 3.2 조건

상태: 기본적으로 데이터가 저장되는 곳입니다.

바닐라 js를 확인하면 변경된 UI 뿐만 아니라 버튼과 h3도 업데이트 됩니다. 그러나 이에 대한 응답으로 변경된 사용자 인터페이스만 업데이트됩니다.

>> respond.js는 이전에 렌더링된 구성 요소를 확인합니다. 그런 다음 다음에 렌더링할 구성 요소를 보고 다른 부분만 결정합니다.

(장점)

// 아래 코드는 최적화 코드는 아니지만 원리를 이해하기 위해 작성되었습니다.

const root = document.getElementById("root");
let counter = 0;
function countUp(){
	counter = counter + 1;
    reRender(); //rerendering을 위해 추가
}
function reRender(){
	ReactDOM.render(<App/>, root);
} //랜더링 함수
function App(){
	return(
    	<div>
        	<h3> Total clicks: {counter} </h3>
            <button onClick = {countUp}> click </button>
        </div>
    )
}
reRender();

//자동으로 다시 렌더링되는 더 나은 코드로 변환

const root = document.getElementById("root");
function App(){
	const (counter, setCounter) = React.useState(0);
    //countUp 함수와 동일한 역할을 한다. counter는 우리가 가져오려는 값이고 setCounter는 데이터값을 바꿀때 사용한다.
    // (가져오려는 값의 이름, set가져오려는 값의 이름)
    const onClick = () => {
    	setCounter(counter + 1);
    };
    return(
    	<div>
        	<h3> Total clicks: {counter}</h3>
            <button onClick = {onClick}> click </button>
        </div>
    )
}
ReactDOM.render(<App/>, root);