[DIL] useState(1)

useState(initialState)란

useState는 컴포넌트에 를 추가할 수 있게 해주는 React 훅이다.

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

 

useState를 호출하여 state 변수를 선언하는데

배열 구조 분해를 사용하여 [something, setSomething]과 같이 state 변수의 이름을 지정해야 한다.

그리고 맨위에는 useState를 꼭 import 해주어야 한다.

 

매개변수(Parameters)

initialState는 초기에 state를 설정할 값인데 모든 데이터 타입이 허용되나

함수에 대해서는 특별한 동작이 있다. 이 인자는 초기 렌더링 이후에는 무시된다.

함수를 initialState로 전달하면 이를 초기화 함수로 취급한다. 이 함수는 순수해야 하고 인자를 받지 않아야 하며 반드시 어떤 값을 반환해야 한다. React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다.

 

반환값(Returns)

useState는 항상 두 개의 값을 가진 배열을 반환한다.

1. 현재 state로 렌더링 하는 initialState와 일치한다.
2. state를 다른 값으로 업데이트하고 리렌더링 할 수 있는 set() 함수이다.

**주의사항

• useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없다. 필요한 경우 새 컴포넌트를 추출하고 state를 그 안으로 옮겨야 한다.
• Strict Mode에서 React는 의도치 않는 불순물을 찾기 위해 초기화 함수를 두 번 호출한다. 이는 개발 환경 전용 동작이며 상용 환경에는 영향을 미치지 않다. 초기화 함수가 순수 함수이면(순수함수여야만 함!) 동작에 영향을 미치지 않다.호출 중 하나의 결과는 무시된다.

main.jsx

//생략
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

 

tip순수함수란?아래처럼 예측이 가능한 함수로 외부 변수를 참조하지 않는 함수를 말한다.

function pure (num) {
  return num + num;
}
console.log(pure(2));

 

아래처럼 재할당이 가능한 외부 변수가 주어지면 함수 값이 언제든 바뀔 수 있기 때문에 순수함수가 아니다.

let num2 = 1;

function notPure (num) {
  return num + num + num2;
}
console.log(pure(2));

 

 

**참고

useState를 한번만 렌더링 하고 싶을 때 

useState(()=>임의함수)
useState 안에 함수를 넣으면 한번만 렌더링됨