Hook

🔴 Hooks

🔻State Hook(useState)

🔻Effect Hook(useEffect)

🔻useMemo

🔻useCallback

🔻useRef

---

Hook

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.

 

기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스컴포넌트의 기능을 구현하기 위해 React 16.8버전에 추가된 것이 바로 Hook이다.

 

즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 것이 바로 Hook이다.

---

const App = () => {
  const[username, setUsername] = useState('')
  return(
    <div>
      <h1>{username}님환영합니다.</h1>
    </div>
  )
}

• Hook은 React 함수(컴포넌트, 다른 Hook들)내에서만 사용이 가능하다.
• Hook의 이름은 반드시 ‘use’로 시작해야 한다.
• 최상위 Level에서만 Hook을 호출할 수 있다._찻반때 { }안에서만 사용한다.
  • (if문, for문 안쪽 또는 콜백함수내에서 호출하지말 것)

---

State Hook(useState)

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = userState(<상태 초깃값>);

• state를 변경하기 위해서는 setState함수에 직접 갑을 입력하거나 현재 값을 매개변수로 받는 함수를 전달해야 한다.
  • ✔️이 때 함수에서 return되는 값이 state에 반영되는 것이다.
• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다.
• state를 변경하기 위해서는 setState를 이용한다.
• state가 변경되면 자동으로 컴포넌트가 재렌더링된다.

---

Effect Hook(useEffect)

✔️컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

함수형 컴포넌트에서 side effects들을 실행하는 것으로 함수(React의 함수형 컴포넌트) 외부에서 로컬의 상태 값을 변경하는 것을 의미한다. 이러한 과정은 다른 컴포넌트에 영향을 줄 수도 있어 렌더링 과정에서는 구현할 수 없는 작업이다.

 

useEffect(() => {
    실행할 코드;
}, []);

const App = () => {
  useEffect(() => {
    EffectCallback
  }, [Deps?])
}

// EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수
// Deps: 변경을 감지할 변수들의 집합(배열)

 

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
  • Effect Callback함수에서 반환하는 함수는 현 상태가 종료될 때 호출된다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 이펙트콜백함수가 호출된다.
  • Deps에 State나 Props를 지정하지 않을 경우 콜백 함수가 실행되지 않는다.
• ✔️useEffect는 우리가 작성한 함수(이를 “effect”라고 합니다)를 기억하고 있다가 렌더링 이후 DOM 업데이트 시마다 실행한다.

---

useMemo

리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.

 

✔️memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

 

쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

const memoizedValue = useMemmo(() => {computeExpensiveValue(a, b), [a, b]})

const App = () => {
  const[firstName, setFirstName] = useState('철수')
  const[lastName,setLastName] = useState('김')
  
  // 이름과 성이 바뀔때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
    return′${firstName} ${lastName}′
  }, [firstName, lastName])
}

• 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄여준다.
  • useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직은 작성하지 않는 것을 권장
• useMemo는 모든 자바스크립트 연산 결과를 메모이제이션한다.

---

useCallback

useMemo() 함수와 더불어 성능 최적화에 사용된다.

 

메모이제이션(memoization)하기 위해서 사용되는 hook 함수이다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

const memoizedCallback = useCallback(() => { 
  doSomething(a, b); // 함수
  }, [a, b], // 배열
);

• 함수를 메모리제이션하기 위해 사용하는 Hook이다.
  • (컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지하는 것)
• useMemo( () => {function, deps}) 🟰 useCallback(function, deps)

---

useRef

저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.

 

const refContainer = useRef(initialValue);

• 컴포넌트 생애 주기 내에서 유지할 ref객체를 반환한다.
  • ref객체는 .current라는 프로퍼티를 가지며, 이 값은 자유롭게 변경할 수 있다.
  • useRef에 의해 반횐된 ref객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.
• 일반적으로 React에서 DOM Element에 접근할 때 사용한다(DOM Element의 ref속성을 이용)