2월 19일 여정 42일차이다.

리액트에서 정말 많이쓰고, 흔히 보는 useState에 대해 자세하게 알아보겠다.

오늘의 Today I Learned

useState는 가장 기본적인 Hook이다. 또한 함수 컴포넌트에서 가변적인 상태를 가지게 해준다.

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

기본적인 형태는 위와 같이 생겼다. useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습을 취하고 있다.

여기서 state는 변수로써 사용된다. 나머지 setState는 함수로써, state 값을 변경할 때 쓰인다.
그럼 setState의 업데이트 방식을 한번 보겠다.

1. 기존의 방식

setState(number + 1)

위 방식은 흔히 쓰던 방식이다. 수정할 값을 넣는 방식이다.

2. 함수형 업데이트

setState(() => {});

이 둘의 차이점은 무엇일까?
위의 기존의 방식대로 number +1을 3번 명령하면 결국 1번만 실행이 된다.

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.
setState((currentNumber)=>{ return currentNumber + 1 });

그러나 이렇게 함수형으로 실행하게 되면 명령을 모아 순차적으로 각각 1번씩 실행시키게 된다.

이렇게 만들어놓은 이유는 공식문서에스는 리액트의 선능을 위해서 이렇게 만들어 놓았다고 한다.

마지막으로

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