useState 기본 개념

1. useState의 반환값

useState 는 길이 2짜리 배열을 리턴하는데 각각 상태변수, 상태변수 settet함수 이다.

그래서 보통 사용할땐 배열의 비구조할당을 이용해 변수에 할당한다.

var [num, setNum] = useState(1);

위 코드에서 num 은 1 로 초기화되고 setNum함수로 num 값을 갱신해줄 수 있다.

값 갱신 : setNum(num + 1) -->  num 값이 달라졌으므로 리렌더링이 발생한다.

 

 

2. 상태변수가 객체, 배열같은 참조값일때

만약 const [obj, setObj] = useState({ name : "kks", birth : "93" }); 처럼 상태변수의 초기값이 객체인 경우,(참조값을 가지는 변수 = 배열, 객체)

obj.name = "kks" 와 같이 직접 수정하면 리렌더링이 일어나지않는다.

그래서 새로운 객체를 만들고 변화를 준 다음(새로운 주소값) setter함수로 상태값을 수정해주어야 한다. 그래야 리렌더링이 발생한다.

--> var newObj = { name : "ham", birth : "93" } --> setObj( newObj )

 

 

3. 리렌더링 시점

useState의 setter함수 가 호출되면 바로 렌더링이 일어나냐. 그건 아니다.

코드 흐름상 setter함수가 여러 번 쓰일 수 있지만 setter함수는 비동기적으로 수행된다.

즉, 상태 업데이트는 일단 나중으로 미뤄두고, 현재 js 호출 스택이 모두 비워지면 그때

실제로 상태 업데이트를 진행한다.

 

이 과정에서 기존상태와 새로운 상태가 같다고 판단되면 렌더링을 하지않는다. 비교는 Object.is 로 한다. (=== 연산자와 비슷)

 

참고 : https://velog.io/@gwak2837/React-Hooks%EC%9D%98-%EC%9D%B4%ED%95%B4

React Hooks 이해하기 (1)