useState 너 누구니?

useState 안써본 리액트 개발자가 있을까요?

근데 useState가 어떻게 작동하는거지?
최적화는?
한번 알아봅시다!

---

useState란?

• 렌더링 사이에 변수가 유지됩니다.
• 값을 변경하면 컴포넌트가 새로 렌더링 됩니다.

즉, 값을 변경하면 새로 컴포넌트를 렌더링하고, 바뀐 값이 유지되게 해주는 것입니다.

---

사용방법

// 0을 기본값으로 가지는 counter 값, 값을 변경하기 위해 사용하는 setCounter를 생성합니다.
// 타입스크립트의 경우 아래와 같이 타입 지정이 가능합니다.
  const [counter, setCounter] = useState<number>(0);

// 이전 값을 기반으로 상태를 변경하는 예시입니다, prev는 이전 상태이고, 새로운 값을 리턴하는 함수를 내부에 사용합니다.
  const increaseOne = () => {
    setCounter(prev => prev + 1);
  }

// 바로 값을 변경하는 예시입니다.
  const resetCounter = () => {
    setCounter(0);
  }
  
return (
    <div>
      <h1>{counter}</h1>
      <button onClick={increaseOne}>
        increase by 1
      </button>
      <button onClick={resetCounter}>
        reset
      </button>
    </div>
  )

• useState(기본값) 으로 한개의 상태와 한개의 함수를 받아 하나는 값으로서 컴포넌트에 사용하고, 하나는 함수로서 로직에 사용합니다.

기타 사용법!

1. 배열 사용하기

const [arr, setArr] = useState([]);
// 배열을 사용할수 있다.

setArr(prev => {
	return [...prev, newData]
})
// 위와 같이 값을 추가할수 있다!

/**

return {
...prev,
key: value
}

와 같이 객체에 추가 혹은 갱신할수도 있다.

**/

---

최적화 해보자!

1. 지연 초기화

• useState의 기본값으로 함수를 넘겨준다.
• 기본값을 구하는 로직이 복잡할경우 위와 같이 구현할 시 최초 렌더링 시에만 초기값을 구해 불필요한 계산이 필요없어진다!

const [test, setTest] = useState(() => {
	// 초기값 가져오기
   	return value;
})

2. useState가 너무 많을때

• useState가 너무 많거나, 값을 수정할때 좀 더 복잡한 로직을 쓰고싶을땐 useReducer를 사용할수 있다!

useReducer

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, 0)
// 두번째 인자는 기본값!

// reducer의 action으로 인자가 전달된다.
// type에 따라 state의 값이 변경되고 reducer에서 바뀐 상태를 return해서 상태가 변경된다.
dispatch({type:'INCREMENT'})

• reducer에 여러 복잡한 로직을 넣을수 있게 되었고, 하나의 useReducer와 여러 type으로 여러 State를 관리할수 있다!