저번에 했던 방식과 달리
자동으로 리렌더링이 일어나게 하는 방법을 공부해보겠다
🟢 state
: 데이터가 저장되는 곳
🖤 js
: js에서는 변수에 저장하는 방식을 많이 쓴다
<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>위의 코드에서 state는 counter(변수)이다
🖤 react
:react에서는 React.useState()를 사용한다
React.useState(초기값)
const data = React.useState(0);는 이전 방식의
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}이 부분과 같은 기능을 한다
❗️React.useState()의 특징
배열 방식으로 저장되는데,
배열의 첫번째 값은 초기값
두번째 값은 그 값을 바꾸는 함수
그래서 초기값을 적용할 때 '배열의 n번째 값' 이런 식으로 지정해줘야한다.
ex. {data[0]}
불편하다!!!
그래서 js의 문법을 이용해볼 것이다
const color = ["pink", "black"]
const [favColor, sosoColor] = color;
그러면 favColor은 "pink"고, sosoColor은 "black"이 된다
이 문법을 활용한다면
const [counter, modifier] = React.useState(0);이렇게 간단하게 표현할 수 있다
📌 자동으로 리렌더링 시켜주는 코드
const [counter, modifier] = React.useState(0);modifier(함수)를 가지고 counter(데이터)값을 바꿨을 때
데이터 값이 바뀌는 동시에 컴포넌트도 리렌더링(업데이트)
🟣 modifier을 이용하여 counter의 값 바꾸는 방법
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}초기값을 0으로 설정하고
onClick()이 발생하면 setCounter가 실행된다 (리렌더링)
그러면 counter의 값이 1 증가한다
modifier 함수를 가지고 state를 변경할 때
컴포넌트가 재생성(리렌더링)된다
📌 react의 가장 큰 특징
데이터가 바뀔 때마다
컴포넌트를 리렌더링하고 UI를 업데이트한다
🟣 state 세팅하는 방법
- 직접 값을 설정하기
(현재 state와 관련없는 값을 새로운 state로 하고 싶은 경우)setState(state +1)
- 함수 전달하기
(현재 state에 변화를 주어 새로운 state로 하고 싶은 경우)setState(state => state +1)
: 함수의 첫번째 인자는 현재 state
📌 코드에 적용
const onClick = () => {
//setCounter(counter + 1);
setCounter((current) => current + 1);
};setCounter((current) => current + 1);
전체 코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.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@7.17.6/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter((current) => current + 1);
};
return ( // 컴포넌트
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</body>
</html>
