State

State

• 컴포넌트를 사용하는 중에 그 내부에서 변할 수 있는 값
• 즉, 외부의 영향을 받지 않고, 컴포넌트 내부에서만 변하는 값을 state라고 한다.
• 만약, 컴포넌트 내부에서 그 상태가 변경되는 요소는 state로 관리되어야 한다.
  →토글 스위치에서의 on / off 여부, 카운터에서 내부의 숫자
• 리액트는 state 가 변경되는 경우 화면을 re-rendering 한다.(중요!)

useState()

• state를 다루기 위해 리액트가 제공하는 함수
• state로 관리되지 않고 변화되는 값의 경우, 리액트에서 상태의 변화를 감지하고 새로 렌더링 해주지 않는다.
• 하지만, state 를 사용하는 경우 값이 바뀌었을 때, 자동으로 내용을 re-rendering 한다.
• 그래서 컴포넌트 내부에서 변경되는 값은 state 로 관리하는 것이 유리한데, 이때 사용되는 것이 useState 이다.

사용하기

• 먼저 react 에서 useState 함수를 import 해야한다.
• const [state 저장 변수, state 갱신 함수] = useState(state 초기값); 로 사용한다.
  → 컴포넌트에 state 를 만들었다라고 표현한다.
• 구조분해 할당으로 변수에 각각 내용을 할당하는 것 이므로 원하는 이름으로 작성해도 된다

 const [사용자이름, 사용자이름변경] = useState('');

// 사용자이름 이라는 state 를 만들었다.

• 갱신함수는 자신 내부에서 실행된 함수의 리턴 값을 다시 저장변수에 전달하고, 리액트는 이 state 가 변화되는 순간 다시 컴포넌트를 렌더링 한다.

import {useState} from 'react' {/* useState 함수를 import 한다. */}

function Parent() {
	const [state, stateSet] = useState('A') 
  {/* 변수와 함수이름을 설정하고, 최초값을 A로 설정한다. */}

return (
  <div>
    <p>{state}</p> {/* 현재의 상태를 출력함 */}
      <button onClick = {() => {
        stateSet(state === 'A' ? 'B' : 'A')
      }
      {/* 클릭이 발생하면, state 가 A 인지 확인하고, 연산자를 참고하여 리턴한다. */}
      {/* 여기서 리턴된 값은 state 의 값이 된다. */}
      {/* 값이 리턴되면 컴포넌트를 다시 렌더링 한다.(값이 바뀐다.) */}
    } > Click </button>
    </div> 
  )
}

• 동일한 컴포넌트를 여러번 불러오는 경우에도 state 는 공유되지 않고 각각 관리된다.

---

+

• 즉, state 는 변경 될 수 있는 데이터를 담는 변수이고, 변수에 담긴 값이 바뀌면 re-rendering 한다라고 정리해 볼 수 있겠다.
• state 에 들어가는 변수로는 배열, 객체 등등 다양한 자료형이 들어 갈 수 있다.
  → 문자열이나 숫자만 들어가는 것은 아님.