[React] 리액트 훅 살펴보기 - 1

안녕하세요, hr0513입니다! 😊

리액트 훅에 대해 정리해보려고 해요

---

목차

 

▷ 리액트 훅 살펴보기 - 1

1. useState

2. useEffect

3. useContext

4. useMemo

5. useCallBack

 

▷ 리액트 훅 살펴보기 - 2

1. useReducer

2. useRef

3. useImperativeHandle

4. useLayoutEffect

5. useDebugValue

---

1. useState

 

함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이에요.

 

import { useSate } from 'react'

const [state, setState] = useState(initalState)

 

여기서 initalState는 초기값을 의미해요. 만약 초기값을 주지 않으면 undefined가 기본값이 돼요.

 

useState는 배열 형태로 값을 반환해요.

첫 번째 요소는 상태값(state), 두 번째 요소는 상태를 업데이트하는 함수(setState)에요.

 

배열의 첫 번째 요소 state 값 자체를 사용할 수 있고,

두 번째 요소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있어요.

 

const [state, setState] = useState(() => {
  console.log("실행") // 최초 렌더링 때만 실행
  return 0
})

 

리액트는 함수 컴포넌트가 렌더링 될 때마다 재실행되지만, useState의 초기화 함수는 최초 렌더링에서만 실행된다는 점을 기억해 주세요.

---

2. useEffect

 

애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이에요.

이 부수 효과가 언제 일어나는지 보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요해요.

 

useEffect(() => {

}, [props, state])

 

첫 번째 인수로는 실행할 부수 효과가 포함된 함수를, 두 번째 인수로는 의존성 배열을 전달해요.

의존성 배열에 있는 값이 변경될 때마다 useEffect가 재실행됩니다.

---

3. useContext

 

컴포넌트들이 데이터나 상태를 편리하게 공유하도록 도와주는 훅이에요.

일반적으로 부모에서 자식에게 데이터를 props로 넘겨주지만, 컴포넌트가 많아지면 복잡해질 수 있어요.

 

const Context = createContext({ hello: '' })

function ParentComponent() {
  return (
    <>
      <Context.Provider value={{ hello: 'javascript' }}>
        <ChildComponent />
      </Context.Provider>
    </>
  )
}

function ChildComponent() {
  const value = useContext(Context)
  
  // javascript 반환
  return <>{value ? value.hello : ''}</>
}

 

이렇게 Context를 사용하면 여러 컴포넌트 사이에서 데이터를 쉽게 주고받을 수 있어요.

---

4.  useMemo

 

비용이 큰 연산에 대한 결과를 저장해 두고, 의존성 값이 변경될 때만 다시 계산하게 해주는 훅이에요.

 

import { useMemo } form 'react'

const memorize = useMemo(() => sum(n), [n]);

 

n값이 변할 때만 다시 계산하게 되고, n이 바뀌지 않는 한 저장된 값을 그대로 사용하게 돼요.

---

5. useCallback

 

특정 함수를 재사용하고 싶을 때 사용해요. 매 렌더링마다 함수를 새로 만드는 대신, 기존 함수를 재사용해서 리소스를 절약할 수 있어요.

 

const [status, setStatus] = useState(false)

const toggle = useCallback(() => {
  setStatus(!status)
}, [status])

 

여기서 status가 변경될 때만 toggle 함수가 새로 만들어져요. 불필요한 함수 생성과 렌더링을 줄일 수 있어 유용해요.