useState

/React, Typescript

 

이것은... 직전 강의를 대충 + 너무 오래전에 듣고 다음 강의를 듣는 나의 탓. useState를 어떻게 시용했던 것인지 기억이 나질 않아서 공부 후 적어본다.

 

📌 useState가 대체 뭔데

useState는 컴포넌트 안에서 변할 수 있는 값을 관리한다...라고 쓰면 나도 무슨 말인지 모르겠으니 예시 코드를 보자.

const [state, setState] = useState(initialValue);

 

- initialValue는 상태의 초기값이다. 즉, default value라고 할 수 있고 처음 이 함수가 시작될 때 가질 값을 설정할 수 있다.

- state는 현재 상태의 값이라고 보면 된다.

- setState는 상태를 업데이트하는 함수이다. 이 함수가 호출되면 리액트가 컴포넌트를 다시 렌더링 한다.

 

숫자를 세는 컴포넌트를 만든다고 가정해 보자.

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(count + 1);
}

 

해당 상태의 초기값은 숫자를 하나도 세지 않은 상태이므로 0이다. count는 현재 숫자, setCount는 숫자를 바꿔주는 함수이다. increaseCount 함수를 호출하면, setCount함수가 count에 1을 더해 숫자를 올려준다. 그럼 리액트가 이러한 변화를 감지하고 화면을 새로 그려준다.

 

useState를 사용하면 리액트가 자동으로 상태 변화를 추적하고, 필요할 때 컴포넌트를 다시 렌더링 해준다. 복잡한 상태 관리 로직을 직접 작성하지 않아도 되니 편리하다.

 

 

📌 Typescript와 useState

타입스크립트에서 useState 구문을 사용할 때, 초기값을 지정해 주면 타입스크립트는 이 초기값의 타입을 자동으로 추론한다. 

const [count, setCount] = useState(0); // number로 추론됨
const [text, setText] = useState(''); // string으로 추론됨

 

 

다만 위의 예시와 다르게 초기값이 복잡한 객체이거나 union 타입인 경우, 타입을 직접 명시해 주는 것이 좋다.

interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User | null>(null);

 

useState뒤에 <User | null>이라고 타입을 명시해 줌으로써, user의 타입이 User 객체이거나 null인 것을 명확히 표현할 수 있다. 타입 안정성을 높이고 오류를 방지할 수 있는 방법이다.