State

State가 필요한 이유

App.js

function App() {
return ( 
	<div className="App">
    	<Counter />
    </div>
  );
}

Counter.js

import React from "react";

export default function Counter () {
	let count = 0;
    return (
    	<div>
        	<button onClick={() => (count += 1)}>+1</button>
            <br />
            Counter: {count}
        </div>
    )
}

위의 코드를 실행시켜 보면

이러한 화면이 나오는데 +1을 눌러도
Counter의 값은 변하지 않는다.

왜냐하면 Counter 컴포넌트는 단지 함수이기 때문에,
어디선가 호출을 하면 return 문으로써 실행을 하고 종료를 하기 때문에
Counter의 값을 변경했다고 하더라도 다시 렌더링 되지 않는다.

따라서 Counter라는 값이 바뀌면 다시 렌더링 해주는
React의 기능 중 하나인 useState() 함수가 필요하다.

useState() - hook 함수

컴포넌트에서 동적인 값을 상태(State) 라고 한다.
useState() 기능을 사용하면 컴포넌트에서 상태를 관리 할 수 있다.

useState() 사용 방법은

Counter.js

import React, { useState } from "react"; // { useState } 함수를 불러온다.

export default function Counter () {   
    //const [값, 값을 변경할 때 쓰는 함수] = useState(초기 값);
   	const [count, setCount] = useState(0);
    
    return (
    	<div>
        	<button onClick={() => setCount(count + 1)}>+1</button>
            //button을 클릭 했을 때 setCount(현재 상태 값 + 1)
            <br />
            Counter: {count}
        </div>
    )
}

위의 코드를 실행시켜 보면

button을 클릭 했을 때 count의 값이 변하고 컴포넌트가
re-rendering 되는 걸 확인 할 수 있다.

원시 타입(Primitive Type), 참조 타입(Reference Type)

원시 타입(Primitive Type)

원시타입은 변수에 원시 타입의 값(boolean, number, string)을 할당하면,
메모리에 값 자체가 저장된다.

Counter.js

import React, { useState } from "react";


export default function Counter() {
  const [count, setCount] = useState(0); // number
  const [show, setShow] = useState(true); // boolean

  const operators = ["+", "-", "*"];
  const [operator, setOperator] = useState(operators[0]); // string
  return (
    <div>
      <button onClick={() => {
        let result;
        if(operator === "+") result = count + 1;
        if(operator === "-") result = count - 1;
        if(operator === "*") result = count * 1;
        setCount(result);
      }}> {operator}1</button>
      <button onClick={() => setShow(!show)}>Show and Hide</button>
      <button onClick={() => {
        const idx = Math.floor(Math.random() * operators.length)
        setOperator(operators[idx]);
      }}
      >
        Change Operator
      </button>
      <br />
      {show && `Counter : ${count}`} 
    </div >
  );
}

참조 타입(Reference Type)

참조타입은 변수에 참조 타입의 값을 할당하면,
메모리 값이 담긴 주소가 저장된다.

Counter.js

import React, { useState } from "react";


export default function Counter() {
  const operators = ["+", "-", "*"];
  const [info, setInfo] = useState({
    count: 0,
    show: true,
    operator: operators[0],
  })

  return (
    <div>
      <button onClick={() => {
        let result;
        if(info.operator === "+") result = info.count + 1;
        if(info.operator === "-") result = info.count - 1;
        if(info.operator === "*") result = info.count * 1;
        setInfo({...info, count: result})
        }}>{info.operator}1</button>
      <button onClick={() => {
        setInfo({...info, show: !info.show})
      }}
      >Show and Hide</button>
      <button onClick={() => {
        const idx = Math.floor(Math.random() * operators.length)
        setInfo({...info, operator : operators[idx]});
      }}>Change Operator</button>
      <br />
      { info.show && `Counter : ${info.count}` }
    </div >
  );
}

요약

조금이라도 복잡한 React 코드를 짜기 위해서는

내부적으로 상태를 관리하는 일은 필요하다.

이를 위해서는 useState 라는 hook 함수를 사용해야 한다.

useState는 - const [state, setState] = useState() 이런 방식으로 사용하고

setState() 함수는 컴포넌트의 re-rendering을 발생시킨다.

하지만 setState() 함수를 실행했다고 해서 무조건 re-rendering이 일어나지는 않는다

setState()의 이전 값과 변경할 값이 다르면 re-redering이 일어나고
값이 같으면 re-rendering이 일어나지 않는다.