<aside> 🚩 Goal: useState의 업데이트 방식에 따라 다르게 동작함을 알고 있자!

</aside>

[목차]

2_exported.mp4

1. useState 복습

(1) 정의

useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. 그래서 우리가 저번 기초 주차에서 useState를 활용해서 카운터 프로그램도 만들어보고, Todo list로 만들어보았죠?

복습해볼까요? 🔥

useState의 기본적인 형태는 아래 처럼 생겼습니다.

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

그동안 배열로 감싸진 모습에 처음에는 익숙하지 않으셨을텐데요. 원래는 useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습일 뿐입니다. 우리는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있었습니다. 그리고 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다고 이미 배웠습니다.

2. 함수형 업데이트

• (1) 함수형 업데이트란?
• (2) 두 방식의 차이점은?

3. 정리

• useState의 업데이트 방식은 2가지 방식이 있으며, 각각 다르게 동작한다.
• useState 로 원시데이터가 아닌 데이터를 변경할때는 불변성을 유지해야 한다.

4. 더 알아보면 좋은 키워드

• 왜 리액트팀은 useState가 위 방식으로 동작하도록 만들었을까?

← 뒤로가기

→ 다음 페이지로