const [counter, setCounter] = React.useState(0);
const [counter, setCounter] = React.useState(0);JS의 문법에는 이렇게 배열의 인자에 바로 이름을 줄수 있다.
React.useState() 는 배열을 반환하는데 그 배열은 두개의 요소를 가진다.
첫번째 요소는 State라고 불리는 data를 나타내는 값이다.
두번째 요소는 Modifier라고 불리는 첫번째 요소인 state의 값을 수정하는 함수(function)이다.
현재의 코드에서는
counter라는 이름의 state
setCounter라는 이름의 modifier가 선언된 것이다.
또한 ReactJS는
데이터가 바뀔때마다 컴포넌트를 리랜더링하고 UI를 refresh 한다.
modifier를 통해 state 가 바뀌면 리랜더링이 일어난다.
그렇기에
ReactJS는 Vanilla JS와 달리
HTML 태그를 생성해 줄 필요도
HTML 태그를 찾아 줄 필요도
이벤트리스너를 생성해 줄 필요도 없다.
ReactJS에서는
바로 HTML을 생성해주고 곧바로 이벤트리스너를 주고 UI를 업데이트하면 자동으로 랜더링이 된다.
state를 바꾸는 방법은 두가지다.
modifier에 인자로
1. 새로운 값 넣어주기
2. 이전 값을 바탕으로 현재 값 설정해주기위해 연산
2번의 방법으로
[1] counter +1 으로 적어주고
[2] setCounter() 안에 함수를 넣어줄 수 있다.
// setCounter(counter + 1);
setCounter((current) => current + 1);위의 코드와 아래 코드는 똑같은 작업을 수행하고 있는 것. 둘다 현재의 state 를 가지고 새로운 state를 계산하는 거지 하지만 아래쪽이 더 안전함. 아래쪽은 리액트가 현재의 값임을 보장하고 있고 그러므로 우리가 원하는 정확한 값을 얻을 수 있다.
*counter가 다른데서도 호출되어서 계산되는 경우도 있기 때문에 그런듯
아래는 참고해온 내용.
setCounter()에 값으로 넣을지 함수로 넣어줄지가 헷갈리신다면,
onClick 함수안에 여러번 넣어서 테스트해보시면 이해가 빠를 것 같습니다.
1. 값으로 여러번
function onClick() {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
}
2. 함수로 여러번
function onClick() {
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
}
1번으로 돌렸을 경우에는 setCounter를 몇번을 호출해도 한 번만 실행되는 걸 보실 수 있고(counter가 1만 증가)
2번으로 돌렸을 경우에는 setCounter가 호출된 만큼 counter가 증가된 걸 볼 수 있습니다.
한 번 연습해보시고 니코쌤 설명을 들으면 이해가 더 될거라 생각합니다.
-출처 wkdus7h
state를 수정하고 싶다면 함수를 이용해야 한다. 그래야 다음의 state 값이 현재의 값을 바탕으로 나올 수 있도록 한다. 이를 확실하게 하는 방법은 modifier 함수 안에서도 인자를 다시한번 함수로 주는 것이다. 여기서 return되는 수가 새로운 state 가 된다.
<!DOCTYPE html>
<html>
<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);
setCounter((current) => current + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>