꾸준히 성장하는 개발자

[React]useState( ) 본문

React

[React]useState( )

ahleum 2022. 4. 27. 20:57

useState( )

useState Hook을 이용하면 state 변수 해당 state를 갱신할 수 있는 함수가 만들어집니다.

const [state변수, state를 갱신할 수 있는 함수] = useState(state변수의 초기값)

import React, { useState } from 'react'; //useState Hook을 React에서 가져옴
 
   function Example() {
     const [count, setCount] = useState(0);
      //useState의 인자의 값으로 0을 넘겨주면 count 값을 0으로 초기화한다
 
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
  }

버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신하고

React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링한다