훅 패밀리

Hooks은 리액트 v16.8에 새로 도입된 기능으로 기존에 함수형 컴포넌트에서 할수 없었던 다양한 작업을 지원합니다.

 

그 패밀리들을 소개하자면

 

1. useState()
2. usesEffect()
3. useReducer()
4. useMemo()
5. useCallback
6. useRef
7. Custum Hook

정말 많은 기능이 추가되었다 ㅎㅎ 공부할게 많아서 행복하다 ^^..

useState()

함수형 컴포넌트에서 가장 기본적인 훅으로 가변적 상태를 지닐수 있게 해줍니다, 가변적 단어 너무 어려운데 제가 이해한 바로그냥 상태를 해당 훅으로 관리할수 있습니다

import {useState} from "react"

const [현재상태, 변경할상태] = useState('')

대략적으로 사용방법은 위와 같습니다 useState를 임포트 해주고 위와같이 선언해주면 됩니다

배열안에 있는 첫번째 원소는 현재값 두번째 원소는 상태를 설정하는 함수 입니다.

useEffect()

useEffect 는 리액트 컴포넌트가 랜더링 될때마다 특정 작업을 수행하도록 설정할수 있는 훅입니다
쉽게 말해 랜더링될때 추가적인 작업을 요청할수 있다라고 전 그렇게 이해했습니다, 살짝 콜백느낌?

import {useEffect} from "react"

const Info = () => {
...
useEffect(()=>{
console.log("랜더링이 되고 있습니다")
    )
}

위 코드는 랜더링이 될때마다 계속해서 실행됩니다 재랜더링이 될때마다 계속 나오면 좀 딥하게 빡칠거 같은데 그럴떈 useEffec 의 두번쨰 파라미터에 빈 배열을 넣어주면 첫 랜더링 될떄만 해당 함수가 실행됩니다 개꿀! 🍯

import {useEffect} from "react"

const Info = () => {
...
useEffect(()=>{
console.log("랜더링이 되고 있습니다")
,[])
}

약간 여기서 TMI지만 클래스 컴포넌트에서 다루는 내용에 생애주기라는게 존재합니다 , 네 사실 제가 기억하고 싶어서 적는거기도 합니다.
페이지에 컴포넌트가 나타나는걸 마운트 , 리랜더링 되면 컴포넌트 정보가 업데이트 되는걸 업데이트 페이지에서 컴포넌트가 사라지는걸 언마운트 라고 합니다 컴포넌트는 이렇게 라이프사이클이 돌아갑니다 봐주셔서 감사합니다

아까 말씀드린 첫 랜더링이 될떄만 보이고 싶을떄라는 말을 했는데 그게 마운트라는것입니다.

근데 이렇게 되면 재랜더링될떄마다 useEffect 값이 전부 호출될것입니다, 만약 나는 이름만 호출하고 싶은데라고 콕 찝어서 사용하고 싶으면
다 방법이 있습니다

import {useEffect} from "react"

const Info = () => {
...
useEffect(()=>{
console.log(name)
,[name])

네 빈배열안에 자기가 업데이트 하고 싶은값을 넣으면 그 값만 업데이트가 됩니다 개꿀! 🍯

책을 보다보니 생소한 단어를 또 보았습니다 뒷정리라고 책에서 하는데 useEffect에서 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 뒷정리 함수를 반환해주어야 한다고 합니다

import {useEffect} from "react"

const Info = () => {
...
useEffect(()=>{
console.log(name)
return()=>{
 console.log('cleanUp')
 console.log(name)
}
)

useReducer()

useReducer 는 useState와 비슷한 구석이 있다 상태를 관리하는건데 애는 좀 어렵게 생겼다 그래서 공부하기 빡친다
그런데 왜 쉬운 useState 냅두고 애가 세상에 나왔냐 봤더니 간단한 상태관리는 useState로 하고 보다 복잡한 상태관리할떄 유용하다고 한다

리듀서를 생성할떄는 첫번쨰 파라미터의 현재 상태라는 state가 들어가고 업데이트를 위해 필요한 정보를 담는 액션(action)값을 전달받아 새로운 상태를 반환한다

const reducer = (state, action) => {
return {...} // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

import {useReducer} from "react"


const reducer = (state, action) => {
return {...} // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

const Counter = () => {
    const [state, dispatch] = useReducer(reducer, {value : 0})
}

Counter 컴포넌트를 보면 useReducer 첫번째 파라미터에 위에서 만든 reducer함수를 넣고 두번쨰로는 해당 리듀서의 기본값을 넣어줍니다.
이 훅을 사용하면 state 값과 dispatch 함수를 받아오는데 여기서 state는 현재 가리키고 있는 상태고, dispath는 액션을 발생시키는 함수입니다.
dispath(action) 과 같은 형태로 함수안에 파라미터로 액션값을 넣어주면 리듀서 함수가 호출되는 구조입니다.

useMemo()

많이 접해보지 못한 훅입니다. 공부하면서 처음 알았고 내용을 살펴보니 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 해주는 훅이라고 합니다.
useMemo에서 첫번쨰 인자로는 콜백함수를 두번쨰 인자로는 의존성 배열을 받습니다. 두번쨰 인자인 배열의 요소값이 업데이트 될떄만 콜백함수를 호출해서
Memoization 된 값을 업데이트 해줘서 다시 Memoization 해줍니다. 만약 빈 배열([])을 넘겨주면 맨 처음 컴포넌트가 마운트 되었을떄만 값을 계속하고 이후에 Memoization 값을 꺼내와 사용합니다, 말이 너무 어렵습니다.

const value = useMemo(() => {
    return calculate();
},[name])

useCallback()

useCallback은 useMemo와 상당히 비슷한 함수입니다, 주로 랜더링 성능을 최적화해야 하는 상황에서 사용한다고 합니다.
이 훅을 사용하면 이벤트 핸들러 함수를 필요할떄만 생성할수 있습니다.

첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.

const callBack = useCallback(함수, 배열);

컴포넌트의 랜더링이 자주 발생하거나 랜더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화 해주는것이 좋습니다.

useRef()

useRef 는 컴포넌트에서 ref를 쉽게 사용할수 있게 해줍니다.
ref가 뭐냐면 클래스 컴포넌트에서도 존재하는건데 일반적인 js 에서 HTML에 id를 사용하여 DOM에 이름을 다는것처럼

document.getElementById('root')

리액트 프로젝트 내부에서도 DOM에 이름을 다는 방법이라고 보면 됩니다.
어떨떄 사용하냐면 DOM을 직접적으로 건드려야할떄 사용합니다.

Custum Hoook()

커스텀훅은 말그대로 내가 만드는 훅입니다, 여러 컴포넌트에서 비슷한 기능을 공유할경우, 나만의 훅으로 작성하여 로직을 재사용할수 있습니다.

 

 

마무리

이론만 공부하고 아직 재대로 구현에 사용을 해보진 못했습니다, 현재 리액트 개발팀에서는 클래스형 컴포넌트가 있지만
함수형 컴포넌트와 훅을 사용하는걸 권장하고 있습니다,
그렇다고 클래스 컴포넌트 지원을 안하는건 아닙니다. 계속해서 지원될 예정이고 아마 많은 회사에서 레거시 코드 또는 현재까지도
클래스 컴포넌트를 사용하리라 생각됩니다 아주 막막합니다, 클래스 너무 어렵거든요
함수형 컴포넌트 짱입니다.