상호작용 추가 - state

state

component는 상호작용의 결과로 화면에 표시되는 내용을 변경해야 한다. React는 component의 메모리로써 state를 사용하여 이를 구현한다.

일반 변수가 충분하지 않은 경우

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        by {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} of {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}   

제대로 동작하지 않는 이유

• 지역변수는 렌더링 간에 유지되지 않는다.
• 지역 변수를 변경해도 렌더링이 트리거되지 않는다. React는 새 데이터로 component를 다시 렌더링해야 한다는 것을 인식하지 못한다.

새 데이터로 구성요소를 업데이트 하려면 필요한 것

• 렌더링 같에 데이터를 유지한다
• React를 트리거하여 새 데이터로 구성 요소를 렌더링한다.

useState(initialState)

작동방식

const [index,setIndex] = useState(0)

1. component가 처음으로 렌더링된다. 초기 값으로 0을 전달했기 때문에 [0,setIndex]를 반환한다. react는 최신 상태 값을 기억한다.
2. setIndex(index + 1)을 실행하면 react는 최신 상태 값을 기억하고 상태를 업데이트한다.
3. 두번째 렌더링 되는 경우 react는 useState(0)를 보지만 리액트는 index 상태에 1이 저장된 것을 기억하기 때문에 [1,setIndex]를 반환한다.

React는 반환할 state를 어떻게 알 수 있는가?

Hooks는 동일한 component의 모든 렌더링에서 안정적인 호출 순서에 의존한다. 위의 규칙을 따르면 Hooks는 항상 같은 순서로 호출되기 때문에 이것은 실제로 잘 작동한다.

state는 고립되고 private하다

state는 화면의 component에 대해 로컬이다. 즉 동일한 component를 두 번 렌더링하면 각 복사본이 완전히 격리된 상태가 된다. 둘 중 하나를 변경해도 다른 하나는 영향을 받지 않는다.
이것이 state가 모듈 상단에서 선언할 수 있는 일반 변수와 다른점이다. 상태는 특정 함수 호출이나 코드의 위치에 연결되지 않지만 화면의 특정 위치에 로컬이다.
또한 부모 구성요소는 자식 구성요소의 상태에 대해 알 수 없다. 자식 구성요소의 state는 그것을 선언하는 구성 요소에 대해 완전히 비공개이다. 이렇게 하면 나머지 구성 요소에 영향을 주지 않고 구성 요소에 state를 추가하거나 삭제할 수 있다.