왜 modifier가 필요한가? 어떻게 Rerendering 할 것인가?
<!DOCTYPE html>
<html lang="en">
<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/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);
//리렌더링이 자동으로 이루어진다 !!! 이전에는 수동으로 리렌더링 했던것들이....
//단순히 한줄 코드로 vounter 같은 데이터를 숫자형 데이터로 건네줄 것이고 그 데이터 값을 바꿀 modifier라는 함수를 이용해서 데이터를 바꿧을 땨 couonter 데이터 값이 바뀌고 컴포넌트도 리렌더링 되는 것이다,
//modifier라는 이름 보다는 setCounter로 'set'이라는 동사를 붙여서 변경해주자 !
};
return (
<div>
<h3> Total clicks : {counter} </h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
이전 코드들과 비교해서 얼마나 편리해졌는지 확인해 봐라 !!
최강 프론트엔드 개발자가 되고싶은 안유진 입니다