State(상태)

State : 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 함 
유즘 유행하는 다크 테마 같은 것도 상태 ! 

 

Counter.js 컴포넌트 생성

const Counter = () => {
    return (
        <div>
        <h2>0</h2>
        <button>+</button>
        <button>-</button>
        </div>
    );
};

export default Counter;

 

<App.js>

import React from 'react';
// import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter';

function App() {
  const number = 5;

return (
  <div>
    <MyHeader />
    <Counter />
    </div>
  );
}

export default App;

 

아직 버튼을 눌러도 이벤트는 발생하지 않는다. 
+누르면 숫자가 증가 / -를 누르면 감소하기를 원한다. 

그러면 그 말은 <h2>태그 사이에 있는 숫자의 값이 변화하기를 원하는 것 --> 상태로 생각할 수 있다. 

0에서 출발, 1씩 증가, 1씩 감소하는 count의 상태

 

 

useState -> 상태를 사용하겠다는 메소드를 추가 설정

useState 메소드는 배열을 반환하고, 배열의 비구조화 할당을 통해서 0번째 index를 count, 1번째 index를 setCount로 
설정.

count는 상태의 값으로 사용이 되고, setCount는 count라는 상태를 변화시키는 상태 변화 함수로써 사용하게 된다. 
useState를 호출하면서 넘겨준 인자 0은 count라는 상태를 만드는 초기값으로 사용이 된다. 

import React, {useState} from 'react'; 


const Counter = () => {
// 0출발
// 1씩 증가
// 1씩 감소
// count 상태

console.log("counter 호출!")

const [count, setCount] = useState(0);

// 1씩 증가시키는 함수 
const onIncrease = () => {
    setCount(count + 1); 
}

const onDecrease = () => {
    setCount(count - 1); 
}

    return (
        <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

컴포넌트는 자신이 가진 상태가 변화하면 상태를 다시 그려 리랜더를 한다. 

 

버튼을 누를 때마다 호출되는 것을 볼 수 있다. 

 

<2개의 버튼을 만드는 것도 가능하다>

import React, {useState} from 'react'; 


const Counter = () => {
// 0출발
// 1씩 증가
// 1씩 감소
// count 상태

console.log("counter 호출!")

const [count, setCount] = useState(0);

// 1씩 증가시키는 함수 
const onIncrease = () => {
    setCount(count + 1); 
};

const onDecrease = () => {
    setCount(count - 1); 
};

const [count2, setCount2] = useState(0);

const onIncrease2 = () => {
    setCount2(count2 + 1); 
};

const onDecrease2 = () => {
    setCount2(count2 - 1); 
};
    return (
        <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
 
         <h2>{count2}</h2>
         <button onClick={onIncrease2}>+</button>
         <button onClick={onDecrease2}>-</button>

         </div>
    );
};

export default Counter;

 

두 개의 상태를 가진 Counter가 완성된 모습. 

React는 여러 개의 State를 하나의 컴포넌트가 가져도 문제가 되지 않는다.