so woon!

[React] React.useState 사용하기 본문

ReactJS/개념정리

[React] React.useState 사용하기

xowoony 2023. 3. 6. 18:13

학습일 : 2023. 03. 06

 

<!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);
      };

      return (
        <div>
          <h3>Total Clicks : {counter}</h3>
          <button onClick={onClick}>Click Me!!</button>
        </div>
      );
    }

    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

useState는 우리에게 배열 하나를 주게 되는데


그 배열의 첫번째 요소는 우리가 담으려는 data 값,


두번째 요소는 data 값을 바꿀때 사용할 modifier이다.

 

 

 

이 한줄의 코드로 인해 React.useState 함수는 counter 같은 데이터를 숫자형 데이터로 건네어 줌


그리고 그 함수를 이용해서 데이터를 바꿨을 때, 데이터 값이 바뀜


컴포넌트도 동시에 리렌더링 됨 (업데이트 완료)

 

 const [counter, setCounter] = React.useState(0);

 

 

 

 

버튼에 onClick을 적용시켜 준다.

<button onClick={onClick}>Click Me!!</button>

 

 

 

카운트업이 정상으로 됨

 

 

리액트의 장점. 바뀌어야 할 부분만 업데이트됨

 

저작자표시 비영리 변경금지

'ReactJS > 개념정리' 카테고리의 다른 글

[React] Inputs, State  (0) 2023.03.11
[React] State 바꾸기  (0) 2023.03.07
[React] 리렌더링  (0) 2023.03.07
[React] render  (0) 2023.03.06
[React] JSX  (0) 2023.03.05
'ReactJS/개념정리' Related Articles more
Comments