리액트의 훅 기능들 요약 react hooks

0. 훅의 규칙

함수형 컴포넌트,혹은 커스텀 훅 내에서만 사용가능

컴포넌트의 루트위치에서만 가능(중첩 함수안에서 사용 불가능)

 

1. useState()

import {useState} from 'react'
const [title,setTitle] = useState('초기값')

setTitle('변경값') //title = 변경값

// 객체도 가능
const [item,setItem] = useState({name:'',count:0})

//기존의 값을 업데이트 하는 방식
setTitlte((이전값)=> (
	name:이전값.name,
    count: 이전값.count+1
)

현재 값의 스냅샷인 title과 이 값을 변경해주는 함수 setTitle 로 이루어진 배열을 반환

리액트에서 변수값 변경시 컴포넌트가 리로딩되어야 할때 사용

객체, 배열, 단순한 값 모두 가능

기존의 값을 가지고 업데이트 할 시에는 내부에서 넘겨받는 (이전값)을 이용해야함

초기 값에 null과 undefined도 가능

 

2. useEffect()

import useEffect from 'react'

useEffect(()=>{
//수행할 부수효과 내용

return ()=>{
//useEffect가 다시 실행되기 직전에 실행될 함수
}
},[감시하고 싶은 state])

사이드 이펙트(http 요청과 같은 부수효과)를 위해 존재하는 훅

모든 컴포넌트의 렌더링이 끝난 뒤에 실행됨(2가지 경우에 훅 실행됨 : 렌더링 이후, 렌더링 될때마다)

즉 컴포넌트 렌더링 후 1번만 수행하고 싶은 작업이나, 특정 state의 변경시에만 수행하고 싶은 부수효과를 위해 사용함

두번재 인자로 배열을 받고 [] 아무것도 넣지 않으면 한번만 수행, 의존 값들(state,함수)을 넣으면 해당 의존 값이 변할때 마다 수행

return을 할 수 있는데 특이하게도 이 return값에는 useEffect 함수를 재실행하기 직전에 수행할 함수를 넣어주면 됨

(예를들어 setTimeout을 useEffect안에 넣었는데 타이머가 여러개 생기는걸 방지하기 위해 return에 타이머 제거 로직을 넣는 등...)

 

3. useCallback()

컴포넌트가 재렌더링 될때 useCallback으로 감싼 컴포넌트는 재구성되지 않음

의존성을 추가하여 특정 값 변경시에만 재렌더링 되게 할 수 있음

예시 : 변경될일 없는 함수가 useEffect 내에 사용되고 있을 경우 컴포넌트 재구성시 함수가 다시 만들어져서 useEffect가 수행 되는걸 막는데 사용

 

react.Memo와 함께 자주 사용되기도 함

 

4. useRef()

주로 input 값에 연결하여 원하는 위치에서 해당 값을 사용하기 위해 사용

useState로 만들어지는 state는 setTimeout과 같은 함수안에서 사용될때 자바스크립트의 클로저의 영향으로 원하는 값을 얻지 못할때가 있음 그럴때 클로저 영향을 받지 않는 useRef를 사용

 

5. useReducer()

const itemReducer = (currentItems, action)=>{
	switch(action.type){
    	case: 'ADD':
        // 추가시 로직
        	return[...currentItems,action.item]
        case: 'DELETE':
        // 삭제시 로직
        	return currentItems.filter(item=>item.id != action.id)
        default:
        // 디폴트 로직
        	return ...
     }
 }
 //[리듀서 , 업데이트용 함수] , useReducer(위에 만들어둔 설정값, [리듀서 초기 값])
 const [useItems,dispatch] = useReducer(itemReducer,[])

비슷한 state들을 한꺼번에 관리하기 위해 사용하는 훅

setState 대신 dispatch({type:'ADD', item: item}) 처럼 사용

 

6. useContext()

앱의 크기가 커지고 컴포넌트가 중첩될경우 props를 힘들게 끌어와서 다시 저 구석에 숨어있는 컴포넌트까지 뿌려주는 작업을 안하기 위해 존재하는 훅, 즉 프로퍼티 전달을 직접적으로 하게 도와주는 기능 (클래스형 컴포넌트 대신 함수형 컴포넌트를 쓰기위해 존재)

createContext 함수와 함께 사용, Context의 개념을 알고 있어야 사용 가능한 훅

 

7. useMemo()

컴포넌트의 불필요한 렌더링을 막기 위해 사용하는 훅 (react.Memo 와 useCallback 의 조합으로 대체 가능)

차이점:

useCallback은 함수를 저장

useMemo 는 값을 저장

 

예시: 복잡한 값에 대한 연산을 수행하느라 계산하는데 시간이 오래 걸릴때 사용(필요한 경우에만 재계산하도록 세팅 가능)

 

하지만 아주 작은 컴포넌트의 경우에는 변경사항을 확인하는 것(useCallback, useMemo 사용) 보다 그냥 리렌더링 해버리는게 더 빠를 수도 있기 때문에 남용은 좋지 않음