vanilla.js
<!DOCTYPE html>
<html>
<body>
<span>Total Clicks : 0 </span>
<button id="btn">Click Me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById('btn');
const span = document.querySelector('span');
function handleClick(){
counter = counter + 1;
span.innerText = `Total Clicks : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
버튼을 클릭할때마다 counter가 증가하는데, 이 count를 react.js state를 이용해 리렌더링 되게 만들어보자.
state 사용 전.
const root = document.getElementById("root");
let counter = 0;
function countUp(){
counter = counter + 1;
ReactDOM.render(<container />, root);
}
const container = () => (
<div>
<h3>Total Clicks : {counter} </h3>
<button onClick={countUp}>Click Me</button>
</div>
);
ReactDOM.render(<container />, root);
*순서.
- reactDom에 container componet를 렌더링.
- html에 해당 component가 그려짐.
- click me 버튼 클릭 이벤트 발생 시
- countUp함수 실행.
- counter 변수가 1 증가.
- container 컴포넌트 리렌더링.
counter의 데이터를 변화 시키기 위해서 ReactDOM.render()를 계속 해줘야 하는 불편함이 존재.
react.js state 사용
const root = document.getElementById("root");
function App(){
const [counter, modifier] = React.useState(0);
const countUp = ()=> {
modifier((current_counter)=>current_counter +1)
}
return (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click Me</button>
</div>
)
}
ReactDOM.render(<App />, root);
*순서
- ReactDOM.render()를 통해 App 컴포넌트 렌더링.
- html이 그려짐
- counter를 증가시키는 클릭 이벤트 발생
- react.useState()를 통해 정의한 modifier함수를 통해 데이터만 리렌더링 되어 증가 된 counter 변수가 화면에 출력 됨.
counter의 데이터를 변화 시키기 위해 ReactDOM 자체를 렌더링 하지 않아도 데이터만 동적으로 변경 됨.
React.useState란?
React Hook 중 하나로, 컴포넌트가 가질 수 있는 상태를 저장하고 변경하는 함수이다.
React.useState는 초기값과 그 초기값을 변경해주는 함수가 담긴 list형태를 리턴한다.
- 배열의 첫 번째 요소 : 상태 값 저장 변수(이하 counter),
- 두 번째 요소 : 상태 값 갱신 함수 (이하 modifier)
사용방법은 React.useState()함수에 초기값을 파라미터로 넣어 설정해주고,
state와 그 값을 변경해주는 함수를 변수로 정의한다.
위 코드 처럼 정의한 state(=counter)을 변경하고자 할때는 useState에서 리턴해준 함수를 가지고 데이터를 변경해준다.
그럼 자동으로 리렌더링 되면서 해당 UI에서 데이터만 동적으로 변하게 됨 !
권장 사용 방법은 데이터 변수를 직접 변화시키기 보다, 함수형 업데이트를 권장한다.
아, 그리고 useState사용 시 state는 함수를 통해 값을 재할당 받는게 아닌 새 값으로 선언되는 것이다.
그래서 const 사용해서 변수를 정의해도 문제가 발생하지 않는 것.
vue랑 비슷한듯 달라서 재밌다. 빨리 다음 강의 듣고 싶어 ..
'SPA > React' 카테고리의 다른 글
| React Router (0) | 2022.11.21 |
|---|---|
| React Effect Hook (0) | 2022.11.07 |
| React Props 그리고 vue에는 없는 신기한 함수 (0) | 2022.11.01 |
| JSX 문법 (0) | 2022.10.19 |
| vanilla.js vs react.js (0) | 2022.10.19 |
