231116 목) Usestate Hook

 

- 들어가기 전에 -

 

Lifecycle feature : 인간의 생몰주기와 비슷하게 컴포넌트가 화면에 나타나고 업데이트되고 사라지는 과정을 관리하는 것을 말한다. 대표적으로 `componentDidMount` , `componentsDidUpdate`, `componentWillUnmount` 등의 메소드가 있다

 

 State : 컴포넌트의 데이터, 사용자가 입력한 텍스트나 현재 선택된 탭 등을 말한다

 

 

Hook

 

훅은 React 16.8 버전에서 새로 추가된 기능으로

 

React의 상태(State)와 Lifecycle feature를 연결해준다

이전까지는 동일한 효과를 내기 위해 클래스 컴포넌트를 사용해야 했다

 

 

제일 기초적이고 중요한 UseState

 

'UseState'는 가장 기본적인 Hook으로 함수 컴포넌트에서 상태를 관리할 수 있게 해준다

UseState를 호출하면 배열을 반환하는데,

첫 번째 요소는 현재 상태 값

두 번째 요소는 이 상태값을 업데이트하는 함수이다

 

 

const [count, setCount] = useState(0);

 

 

이 함수는 숫자를 관리하는 상태이다

 

0은 카운트의 초기값으로 SetCount는 count를 업데이트하고

이 함수를 호출하면 count의 값이 바뀌고 컴포넌트가 재렌더링된다

 

 

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

 

 

이 코드를 통해 현재 카운트를 count로 호출하고

증가버튼과 감소버튼에 화살표 함수로 setCount를 설정하여

값을 증가시키거나 감소시킬 수 있다

 

 

지연 초기화

 

초기 상태를 설정할 때 함수를 사용해 지연 초기화가 가능한데

초기 상태가 복잡한 계산을 할때 유용하다

 

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

 

컴포넌트가 최초 렌더링 될때만 `someExpensiveComputation` 함수가 호출되고,

이후 렌더링부터는 호출되지 않아서 성능개선에 좋다

 

 

함수형 업데이트

 

직접적으로 상태를 변경하는 대신 함수를 전달해서 업데이트가 가능하다

 

setCount(prevCount => prevCount + 1);

 

이런 식이면 PrevCount의 값을 기반으로 새로운 상태를 계산할 수 있다

 

상태 업데이트의 비동기성

 

React에서 UseState를 사용할 적에 성능 최적화를 위해 여러 상태 업데이트를 배치로 처리한다

 

따라서 `setState` 호출 직후에 새 상태 값이 반영되지 않을 수도 있다

그러므로 최신 상태에 의존하는 로직을 작성할 시엔 주의가 필요하다

 

 

병합되지 않는 상태 업데이트

 

`useState` 업데이트 함수는 상태를 병합하지 않아

완전히 이전 상태를 대체한다

특히 상태가 객체일 때 유의해야 한다

 

setState(prevState => {
  return { ...prevState, newProp: newValue };
});

 

상태의 일부만 변경하고 싶으면 ` ... ` 스프레드 연산자를 사용해야 한다