useState, useEffect, useRef

뭐가 뭔지 명확하지않은 React Hook 정리

useState

왜 쓸까?

• 상태 관리 목적

  상태 관리가 꼭 필요할 때만 사용하는 게 좋지 않을까?
  상태 관리가 꼭 필요한 때가 언제일까 고민해보기

const[state, setState] = useState(초기값);

• state

  • 컴포넌트가 가질 수 있는 상태

• setState

  • setState 함수를 이용해서 state를 변경하면 해당 컴포넌트는 다시 렌더링된다.

• useState(초기값)

  • useState의 초기값에 콜백함수를 넣으면 처음 렌더링될 때만 호출된다.
  • 초기값이 콜백함수일때 단점
    • 콜백 함수가 리턴할 때까지 렌더링하지 않고 기다리기 때문에 첫 렌더링이 오래 걸릴 수도 있다.
  • 초기값이 콜백함수일때 장점
    • 컴포넌트가 다시 렌더링 되어도 값이 유지된다.

---

useEffect

왜 쓸까?

• mount
  • 화면에 첫 렌더링
• update
  • 다시 렌더링
• unmount
  • 화면에서 사라질때

• mount, update, unmount 상황에서 특정 작업을 처리할 코드를 실행시켜주고 싶을때 사용한다.

// 렌더링될 때마다 실행 
useEffect(() => {// 작업... }) 
    
// 1.화면에 첫 렌더링될 때 실행 2.value값이 바뀔 때 실행
useEffect(() => {// 작업... }, [value])
    
    
useEffect(() => {
    // 구독...
    
    // Clean Up 정리 작업이 필요할 때  
    return () => {
        // 구독 해지 등의 작업, unmount 상황
    }
}, [] // <- dependency array);

✅ useEffect 함수를 만든 의도는 컴포넌트의 상태 (props, state)의 변화에 따라 상태를 이용해 부가 작업(side effect, dom 직접변경, api호출 등)를 처리하기 위한 것

---

useRef

const ref = useRef(value)

{current: value}

왜 쓸까?

• 저장 공간

  state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
  Ref의 변화 -> 렌더링X -> 변수들의 값이 유지됨
  state의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지됨

• DOM 요소에 접근
  • input 요소에 접근, focus() 주고 싶을 때

    document.querySelector와 비슷해보인다.

• 장점
  • 자주 바뀌는 값을 state에 넣으면? 값이 바뀔 때마다 렌더링된다. 그런데 Ref의 값은 바껴도 렌더링되지 않기 때문에 성능이 더 좋다고 할 수 있다.
  • 컴포넌트의 모든 생애주기에 있어서 값이 유지된다.

✅ useRef는 변화는 감지하지만 그 변화가 렌더링을 발생시키면 안되는 값일 때 쓰면 편리하다. 이 경우에 useEffect를 사용하면 무한루프에 빠질 수도 있다.

Ref의 값과 변수값 모두 값이 변경되더라도 렌더링되지 않는다.
차이점이 뭘까?

// 렌더링되더라도 countRef.current의 값은 유지된다. 
  const countRef = useRef(0);

// 렌더링될 때마다 countVar의 값은 초기화된다. 
    let countVar = 0;