useState

• useState는 컴포넌트에 상태 변수를 추가할 수 있는 React Hook 입니다.
• 컴포넌트 최상위에서 상태 변수를 선언합니다.
• 상태 변수는 배열 디스트럭처링을 통해 선언하는 것이 관례입니다.

const [state, setState] = useState(initialState)

Parameters (매개변수)

• 초기상태 ( intialState ) : 초기 상태를 설정할 값으로 모든 유형의 값을 사용할 수 있습니다. 초기 상태로 전달한 매개변수는 초기 랜더링 이후에는 무시됩니다.
  • 매개변수로 함수를 전달할 경우, 초기화 함수로 취급됩니다. 이때, 이 함수는 순수 함수여야 하며, 인수를 받지 않고, 어떠한 값을 반환해야 합니다.

Returns ( 반환값 )

useState는 두 개의 값을 지닌 배열을 반한합니다.

• 현재 상태를 반환합니다. 첫 번째 랜더링 중에는 initialState로 전달한 값입니다.
• 상태를 다른 값으로 업데이트하고 랜더링을 트리거하는 set 함수를 반환합니다.

주의

• useState는 Hook이므로 컴포넌트의 최상위 레벨 또는 자체 Hook에서 호출만 호출 할 수 있습니다. 루프난 조건문 내부에서는 호출 할 수 없습니다.
• 엄격 모드에서는 디버깅을 위해 초기화 함수를 두 번 호출합니다. 다만, 이는 개발 단계에서만 동작하여 프로덕션에서는 동작하지 않습니다.

---

set funtion

• useState가 반환한 set 함수는 상태를 다른 값으로 업데이트하고 랜더링을 트리거할 수 있습니다. 매개변수로 다음 상태를 직접 전달하거나, 이전 상태에서 계산하는 함수를 전달할 수 있습니다.

Parameters (매개변수)

• nextState
  • 변경할 상태입니다. 모든 유형의 값을 전달할 수 있으나, 함수를 전달할 경우 다른 동작을 합니다.
  • 함수를 인수로 전달할 경우 업데이터 함수로 취급합니다. 이 함수는 순수 함수여야 하며, 이전 상태를 유일한 인수로 사용해야 하며, 다음 상태를 반환해야 합니다.

Returns ( 반환값 )

• 반환값을 가지지 않습니다.

주의

• set 함수는 다음 랜더링에 대한 상태 변수만 업데이트합니다. 따라서 set 함수를 호출한 후 상태 변수를 읽으면 호출전 화면에 있던 이전 값을 그대로 가져옵니다.
• Object.is 를 통해 새로운 상태 값과 현재 상태 값을 비교하여 동일하다면 React는 컴포넌트와 그 자식을 리랜더링하지 않습니다.
• React는 모든 이벤트 핸들러가 호출되고 설정된 함수를 호출한 후에 UI를 업데이트 합니다. 이렇게 단일 이벤트 중에 여러 번 다시 랜더링하는 것을 방지할 수 있습니다.
• 랜더링 도중 set 함수를 호출하는 것은 현재 랜더링 중인 컴포넌트 내에서만 허용됩니다. React 해당 결과물을 버리고 즉시 새로운 상태로 다시 랜더링을 시도합니다.
• Strict Mode에서는 디버깅을 위해 업데이터 함수를 두번 호출합니다. 이는 개발 시에만 두 번 동작하며 프로덕션에서는 동작하지 않습니다.