state

객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.
컴포넌트안에서 어떤 값이 바뀌어서 랜더링이 되야할 때 사용한다.
구조 분해할당도 사용된다.
시스템적으로 명시적으로 값을 바꾸는것이 안되기 때문에 사용한다.

기본 구조

const [text, setText] = useState(초기값 어떤 자료형태든지 올 수 있음);

import React, { useState } from "react";

const App = () => {
    const [name, setName] = useState("김종연");
    return (
        <div>
            <h1>state 테스트</h1>
            <button
                onClick={() => {
                    setName("이종연");
                }}
            >
                이종연으로!
            </button>
            {name}
        </div>
    );
};

export default App;

김종연에서 버튼을 누르면 이종연으로 변경됨!
  

응용

button에 onclik과 자주사용된다. 또한 input에 onchange와도 입력한 값을 변수에 저장할 때 사용한다.

import React, { useState } from "react";

export const App = () => {
    const [text, setText] = useState("");
    return (
        <div>
            <input
                type="text"
                onChange={(e) => {
                    setText(e.target.value);
                }}
            />
            <br />
            {text}
        </div>
    );
};

export default App;
input박스에 '안녕하세요' 치면 밑에 '안녕하세요' 그래도 출력 

input태그에는 value속성을 엮어줘야한다.
왜냐하면 value속성을 사용하지 않으면 비제어 컴포넌트이고 엮어줘야 제어 컴포넌트가 되기 때문이다.

⭐⭐입력하는 text와 state의 text를 늘 같다고 동기화하기 위해서는 제어컴포넌트를 사용해야한다.!!

하루를 마치며

오늘은 개인과제 제출 하루 전날이다. 개인과제에 늪에 빠져 힘든 하루를 보냈다. 코딩이라는 것은 쉽지 않다고 다시 느꼈다. 손으로 많이 해보지 않으면 절대 늘 수 없고 생각해보지 않으면 검색에 의존하게된다. 이런 것들을 알고있지만 막상 실천하는 것이 어렵다. 앞으로 내가 풀어야할 숙제라고 생각하기 때문에 남은 3개월동안 이악물고 고쳐낼 것이다.