State

state (상태)

: 컴포넌트의 동적인 값 (동적인 데이터를 다룰 때 사용됨)
: 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 함

---

counter 기능 만들기

import React from "react";
import "./App.css";
import Counter from "./Counter"; // Counter 컴포넌트 받아오기
import MyHeader from "./MyHeader";

function App() {
  return (
    <div>
      <MyHeader />
      <Counter />  // Counter 컴포넌트 사용
    </div>
  );
}

export default App;

(0) 기본 화면 그리기

// Counter.js
const Counter = () => {
  return (
    <div>
      <h2>0</h2> // 동적으로 상태가 변화해야하는 요소 -> state 사용
      <button>+</button>
      <button>-</button>
    </div>
  );
};

export default Counter; // Counter 컴포넌트를 내보내서 App.js에서 사용하기

(1) state 설정

import React, { useState } from "react"; // state는 react의 기능이기 때문에 react에서 react, {useStaate} 메소드를 임포트 해줘야함

const Counter = () => {

  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h2>{count}</h2>
      <button>+</button>
      <button>-</button>
    </div>
  );
};

export default Counter;

state

• 상태값으로 사용. 값이기 때문에 JSX에서 {}을 통해 return 받아서 html으로 화면에 표시해줄 수 있음

setState

• count라는 상태를 변화시키는 상태변화함수.

useState

• react의 메소드
• 배열을 반환하고 배열의 비구조화 할당을 통해 idx 0 = count, idx 1 = setCount 상수로 받아옴
• useState()에서 인자로 넘겨준 값은 state의 초기값이됨

(2) setState 함수 설정

import React, { useState } from "react"; // state는 react의 기능이기 때문에 react에서 react, {useStaate} 메소드를 임포트 해줘야함

const Counter = () => {
  const [count, setCount] = useState(10);

  // state를 변화시키는 함수 정의
  const onIncrease = () => {
    setCount(count + 1); // 원래 state를 받아서 변화시킨 후 setState로 넘김
  };

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

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      {/* JSX에서는 {}를 통해 onClick함수 걸어줌 */}
      <button onClick={ondecrease}>-</button>
    </div>
  );
};

export default Counter;

---

re-render

• +, - 버튼을 누를 때마다 화면이 바뀜 --> state가 업데이트 될때마다 Counter() 함수가 return을 다시 하는 것. (화면을 새로 그림)
• 컴포넌트는 자신이 가진 state가 변화되면 화면을 다시 그려 rerender함. (=함수 자체가 다시 호출됨)

// Counter.js
import React, { useState } from "react"; // state는 react의 기능이기 때문에 react에서 react, {useStaate} 메소드를 임포트 해줘야함

const Counter = () => {
  console.log("호출됨");
  const [count, setCount] = useState(10);

  // state를 변화시키는 함수 정의
  const onIncrease = () => {
    setCount(count + 1); // 원래 state를 받아서 변화시킨 후 setState로 넘김
  };

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

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      {/* JSX에서는 {}를 통해 onClick함수 걸어줌 */}
      <button onClick={ondecrease}>-</button>
    </div>
  );
};

export default Counter;

// App.js
import React from "react";
import "./App.css";
import Counter from "./Counter";
import MyHeader from "./MyHeader";

function App() {
  console.log("앱 호출");
  return (
    <div>
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

• (1) 처음 랜더 시 App.js의 콘솔이 찍힌 후, Counter.js의 콘솔 찍힘
• (2) 버튼 누를때마다 Counter.js만 re-render됨

  근데 왜 두 번씩 호출이 될까..?ㅠ

---

Counter 컴포넌트는 State를 두 개 이상 가질 수 있음

• 10씩 증가, 감소시키는 Counter2

import React, { useState } from "react"; // state는 react의 기능이기 때문에 react에서 react, {useStaate} 메소드를 임포트 해줘야함

const Counter = () => {
  console.log("호출됨");
  const [count, setCount] = useState(10);

  // state를 변화시키는 함수 정의
  const onIncrease = () => {
    setCount(count + 1); // 원래 state를 받아서 변화시킨 후 setState로 넘김
  };

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

  // 두 번째 State
  const [count2, setCount2] = useState(100);

  const onInc2 = () => {
    setCount2(count2 + 10);
  };

  const onDec2 = () => {
    setCount2(count2 - 10);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={ondecrease}>-</button>
      <br />
      <h2>{count2}</h2>
      <button onClick={onInc2}>+ 10</button>
      <button onClick={onDec2}>- 10</button>
    </div>
  );
};

export default Counter;