[ React ] React 입문 ③ State

[ State( 상태 ) ]

 

state : 계속해서 변환하는 특정 상태, 상태에 따라 각각 다른 동작을 한다.

 

컴포넌트가 상태라는 테마를 갖고 사용자는 스위치 같은 요소를 통해 상태를 변화시킬 수 있다.

 

리액트에서의 state는 컴포넌트가 가진 테마처럼 계속해서 값이 바뀔 수 있는 동적인 데이터이고 상태를 변경하는
등의 권리는 상태를 가진 컴포넌트가 직접 관리하게 된다. 

 

state는 리액트의 기능이기 때문에 리액트를 import 해줘야한다. 또한 useState라는 상태를 사용하겠다는 메소드를
추가적으로 import 해줘야한다. 

import React,{useState} from 'react';

 

App.js

import './App.css';
import Counter from './Count';

function App() {


  return (
    <div className="App">
      <h2>+를 누르면 1 증가, -를 누르면 1 감소</h2>
      <Counter/>
    </div>
  );
}

export default App;

 

Counter.js

import React,{useState} from 'react';

const Counter = () => {

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

    const plus = () => {
        setCount(count + 1);
    }

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

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

export default Counter;

 

useState()라는 리액트의 메소드는 배열을 반환하고 배열의 비구조화 할당을 통해서 0번째 인덱스인 count와
1번째 인덱스 setCount라는 상수로 받아온다. 

 

* 비구조화 할당 : []를 활용해서 배열의 값을 순서대로 변수에 할당해서 사용할 수 있는 방법,

                            값을 할당받지 못하는 변수는 undefined을 갖게 된다

 

useState() 사용법

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

 

0번째 인덱스 count는 상태의 값으로 사용이 되기 때문에 JSX에서 리턴을 해 화면에 표시할 수 있다. 1번째 인덱스인

setCount는 count라는 상태를 변화시키는 상태 변화 함수로 사용이 된다. 

 

useState()를 호출하면서 넘겨준 인자인 0은 count라는 상태를 만드는데 초기값으로 사용이 된다.

즉 0에서의 출발이 useState(0)이 되게 된다. 0으로 초기화가 되어있기 때문에 count는 0이다.

 

useState()로 상태를 만들면 count라는 이름으로 상태의 값을 불러올 수 있고 setCount라는 상태로 count라는
상태의 값을 변화시킬 수 있다. 또한 초기값은 useState()의 인자로 넣어주면 된다. 

 

* JSX에서 onClick 사용하는 방법

const plus = () => {
   setCount(count + 1);
};

<button onClick={plus}>+</button> //JSX

<button onClick="plus()">+</button> //HTML

 

화면에 표시되는 count가 실시간으로 바뀐다는 것은 count state가 업데이트 될 때마다 Counte 함수가 반환을 다시
한다고 볼 수 있다. App 컴포넌트가 Counter 컴포넌트를 호출하고 반환받은 HTML을 화면에 표시하는 것 이기 때문에 
Counter 컴포넌트는 리턴을 다시 해 화면을 새로 그리는 것이다. → reRender

 

즉, 컴포넌트는 자신이 가진 상태가 변화하면 화면을 다시 그려 reRender를 해서 함수가 다시 호출된다.

 

 

리액트에서는 컴포넌트가 가진 상태가 바뀌면 그 컴포넌트는 reRender가 된다. 그렇기 때문에 실시간으로 변화하는 값을

만들 수 있다. 

 

* state의 이름과 state의 상태 변화 함수는 상수를 선언하는 것이기 때문에 이름이 겹치면 안된다. 

 

또한 리액트는 여러 개의 state를 하나의 컴포넌트가 가져도 전혀 문제가 되지 않는다. 

 

state는 화면에 나타나는 데이터를 쉽게 교체하고 업데이트 할 수 있도록 도와준다. 이 점을 이용해서 이벤트 동작에 

반응해서 요소들이 동적으로 바뀌는 웹 사이트를 만들 수 있다.