state

state

• 컴포넌트 내부에서 바뀔 수 있는 값
• 자주 변경될 수 있는 값을 state로 관리해준다.
• let을 사용해서 변경하지 않고 굳이 state를 사용하여 변경하는 이유는, lifecycle에 따라서 화면값이 변했을 때 그 변화된 값을 화면에 다시 리렌더링 시켜주기 위한 조건들이 있다. 그 조건들 중 하나가 state가 변경되었을 때이다.
  물론 let으로도 변경시켜서 할당해줄 수 있지만, 그렇게 하면 react에 의해 변경된 값이 화면에 바로 반영되지 않는 문제점이 있다.(state가 바뀌었다고 인식하지 못하기 때문)

  ---

useState

• 수 많은 Hook중 하나이다.

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName('박할아');
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

function GrandFather() {
  //const [value, setValue] = useState(초기값)
  const [name, setName] = useState('김할아'); // state를 생성
  return <Mother grandFatherName={name} setName={setName} />;
}

function App() {
  return <GrandFather />;
}

이 코드는 버튼을 누르면 이름이 바뀌는 코드이다.
이 state로 변경된 값은 새로고침을 하면 초기값으로 돌아간다.

---

button에서 useState 활용

function App() {
  const [name, setName] = useState('길동이');
  function onClickHandler() {
    setName('희동이')
  }
  return (
    <div>{name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

이런식으로, setName을 이용하여 버튼을 누르면 어떤 값을 바뀌게 할 수 있다.

---

input에서 useState 활용

function App() {
  const [value, setValue] = useState('');
  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };
  console.log(value)
  return (
    <div>
      <input type='text' onChange={onChangeHandler} value={value} />
    </div>
  );
}

input이라 onchange함수를 사용하였고, input의 value에 접근하기 위해 event.target.value를 사용했다.

---

불변성

• 객체나 배열, 함수 등은 불변성이 없다.
• 왜 react에서 데이터에 불변성을 지켜주는 것이 중요한지
  : react에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다.
  state가 변경되면 리렌더링, 변하지 않으면 리렌더링 하지 않는데, 이 "변경되었다"는 것을 확인하는 방법이 "state 변화 전, 후의 메모리 주소를 비교"하는 것이다."