React. React Js - State Functions (current의 이용)

지난 포스팅의 예제를 이어서 진행함. 🔻

React. React Js - setState

 

 

State Functions

 

const root = document.getElementById("root");

function App() {
  const data = React.useState(0);
  const [counter, setCounter] = data;
  
  const onClick = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}
ReactDOM.render(<App />, root);

 

지난시간에 우리는

React.useState()와 데이터를 바꾸는 modifier 함수로

코드를 작성했었다.

const onClick = () => {
    setCounter(counter + 1);
};

 

그중에서도 이 부분을 살펴보면 데이터가(=counter이) counter + 1으로 바뀌게 설정하였는데,

이 방법은 사실 좋지 않은 코드이다.

>> 다른 부분에서 임의로 counter값이 바뀔 수 있으므로.

 

const onClick = () => {
  // setCounter(counter + 1);
  setCounter(current => current + 1);
};

위와 같이

current라는 값을 사용하면,  현재 state을 바탕으로 다음 state를 계산할 수 있다.

 

 

 

---

Ref. 

(Free Lecture)

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders