hook이론1. State Hook

목차

1. useState()메서드 호출의 의미
2. 문법
3. 초기 렌더링 시의 state

 

---

 

1. useState() 메서드 호출의 의미?

• state 변수의 선언
• 클래스 컴포넌트에서의 this.state 기능과 동일
• state 변수는 react에 의해 해당 컴포넌트 뿐만이 아닌 전역으로 사용 가능

 

2. 문법

• 인자값은 state의 초기값
• 만약, n개의 다른 변수를 저장하기를 원한다면 useState() 메서드를 n번 호출해야 함
• state 변수와 state 변수를 업데이트 할 수 있는 함수를 반환

 

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

 

최초 렌더링을 하는 동안 반환된 state는 첫번째 전달된 인자인 initialState 값과 동일하다.

이후 setState함수를 호출하여 state 갱신 시, useState를 통해 반환받은 첫번째 값은 최신화된 state가 됨

 

 

 

<주의>
useState는 클래스 컴포넌트의 setState() 메서드와 달리
업데이트 객체를 자동으로 병합하지 않는다.

따라서, setState에 들어갈 인자값이 객체나 배열인 경우,
스프레드 연산자를 사용하여 state 복제를 먼저 작성 하고 나서
업데이트 시킬 state를 작성해야 한다.

또는 useReducer() 메서드를 호출하는 방법도 있는데, 이 방법은 다음 게시글에서 알아보자

 

 

2. 초기 렌더링 시의 state

• 앞선 코드에서 useState() 메서드 호출 시 작성한 인자값 initialState는 초기 렌더링 시에 사용하는 state이다.
• 이 값은 이후의 렌더링 시에는 무시된다.
• 초기값 작성이 가성비가 떨어진다면 아래와 같이 함수형태로 작성도 가능함

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});