[React] state(상태)

 

리액트에서의 상태 : 다크모드를 예시로 컴포넌트가 갖는 theme처럼 계속 값이 바뀔 동적 데이터

 

 

 

 

 

 

 

 

 

 

Counter 컴포넌트를 App 컴포넌트의 자식요소로 추가

import './App.css';
import MyHeader from './MyHeader';
import MyFooter from './MyFooter';
import Counter from './Counter';

const func = () => {
  return "func";
}

const number = 5;
function App() {
  return (
    <div className="App">
      <MyHeader/>
        <h2>안녕리액트 {func()} </h2>
        <b id='bold_text'>
          {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
        </b>
      <Counter/>
      <MyFooter/>
    </div>
  );
}

export default App;

+ - 버튼에 아무런 동작도 정의하지 않았기때문에 아직은 이벤트 발생이 없다

 

 

 

 

 

useState 메서드 임포트를 하여 상태만들기

Counter.js를 수정했다.

//상태값, count상태를 변화시키는 상태변화 함수
	[count, setCount] 		//초기값
    					= useState(0);

 

 

count로 상태값을 불러오고 setCount로 상태를 변화시키기위한 버튼에 이벤트 주기

import React, {useState} from "react";

const Counter = () => {

    // 0에서 출발하여
    // 1씩 증가하고 1씩 감소하는 count 상태

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

    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;

 

컴포넌트는 자기가 가진 상태가 변화하면 리랜더를 한다.

 

 

 

counter컴포넌트는 state를 여러개를 가져도 상관없다.

다만 상수를 선언하는 것이기 때문에 이름이 겹치지 않도록 주의

 

 

 

 

 

 

 

참고 :

- 한 입 크기로 잘라먹는 리액트