useState TMI 및 사용패턴

비동기로 상태를 업데이트 한다

https://yeoulcoding.tistory.com/169

• 리액트는 성능을 위해 나름의 batch process를 사용
• 여러 번의 업데이트가 있을 경우 한번에 모아서 처리하며,
  마지막 setState의 값으로 업데이트

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

    const onCount = () => {
    	// 같은 setState가 여러번 실행
    	setCount(count + 1);
    	setCount(count + 1);
    	setCount(count + 1); // 마지막 setState만 적용됨
    }

    // count는 3이 될 것 같지만, 마지막 값이 적용되며 1로 업데이트

• 예상처럼 같은 setState를 여러번 실행하고 결과가 3이되게 하고 싶다면,
  함수형 업데이트를 활용 할 수 있다

    const onCount = () => {
    	setCount(prev => prev + 1);
    	setCount(prev => prev + 1);
    	setCount(prev => prev + 1);
    }

이전상태와 같은 값일 경우 리렌더링 하지 않는다

https://ko.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

• 리액트는 이전 상태와 같은 값인지 판단하기위해 object.is를 활용한다
• 만약 같은 값이라면 리렌더링 하지 않는다

상태관리를 위한 여러가지 패턴

/* 객체 키 매핑형 */
const [user, setUser] = React.useState({
  email: '',
  password: ''
})
const { email, password } = user

function onInput(e) {
  setUser({
    ...user,
    [e.target.name]: e.target.value
  })
}

// HTML
<input 
  type='text' 
  name='email' 
  value={email} 
  onClick={onInput} 
/>

<input 
  type='password' 
  name='password'
  value={password}
  onClick={onInput} 
/>

/* 최신값 참조 */
// useCallback 활용
const onCount = useCallback(() => {
	setCount(count + 1)
}, [count])

// 함수형 업데이트 활용
const onCount = useCallback(() => {
	setCount(prev => prev + 1)
}, [])


/* 상태 업데이트 후 후처리를 위해 useEffect 활용 가능 */
useEffect(() => {
   // 후처리
}, [count])