내가 보려고 만든 개발 공부 일지

useState 기본 개념 본문

React

useState 기본 개념

kwangsunny 2021. 7. 2. 01:56

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)

React는 v16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리할 수 있는 API인 Hook을 제공하고 있다. Hook을 사용하면 함수 컴포넌트에서도 클래스 컴포넌트처럼 상태를 저장할 수 있고 컴포넌트 생

velog.io

 

'React' 카테고리의 다른 글

React - useReducer  (0) 2021.07.16
Hooks 사용 규칙  (0) 2021.07.02
props.children  (0) 2021.07.02
React 컴포넌트 함수형 vs Class형  (0) 2021.07.02
Comments