React hook - useState

React의 useState라는 hook에 대해서 알아볼 것이다.
use[~]가 붙으면 react hook이라는 의미이다.

hook은 React 16.8.0 version 부터 배포된 기술이다.
react hook - 리엑트 공식 사이트

hook의 종류는 여러가지이고 오늘 공부할것은 이 중의 하나인 useState이다.

useState는 상태값을 관리해주는 훅! 이다.

말로 하는것보다 직접 사용해 보면서 익혀보자

//사용 방법
const [상태의 값, 값을 변경하는 함수] =  useState(초기값);

예시) 색상 변경

 <script type="text/babel">
      const rootElement = document.getElementById("root");
 
      const App = () => {
        //컴포넌트의 상태의값, 값을 변경하는 함수
        const [color, setColor] = React.useState("red");

        const handleClick = (colorName) => {
          setColor(colorName);
        };

        return (
          <>
            <button onClick={() => handleClick("red")}>red</button>
            <button onClick={() => handleClick("blue")}>blue</button>
            <button onClick={() => handleClick("green")}>green</button>

            <div
              style={{
                width: "130px",
                height: "130px",
                backgroundColor: color
              }}
            ></div>
          </>
        );
      };
      ReactDOM.render(<App />, rootElement);
    </script>

리엑트 훅인 useState를 사용하면 기존에서는 객체로 담아놓고 계속 랜더링 해줫던 것을
이제는 리엑트의 state관리 도구인 useState의 함수를 쓰니깐 값이 바뀜을 계속 인지할수있다.

특징

• 새로 생성되면(화면이 새로 그려지면) 값들이 초기화된다
• • 화면이 새로 그려질때 값이 초기화되면 내장정보들같은경우에는 어떻게 처리해야할까? localStroage? chache? cookie?