요즘 회사에서 Mendix인가 뭔가 때문에 벨로그 출입이 뜸했는데... 그래도 다시 한가해 졌으니 다시 공부 시작해야지

오늘은 무엇을 배웠는가?

Hooks

Hooks란 무엇인가? 함수 컴포넌트의 라이프사이클 관리를 위해 창안된 함수들로 useState, useMemo, useEffect, useReduce, useCallback이 있다고한다.

useState

useState는 함수형 컴포넌트에서 값이 바뀌는 변수들이 필요할 텐데 이걸 let,val 이런걸로는 안된단다. 이걸 사용하려면 useState를 사용해야 한단다.

import {useState} from 'react'
const test = (props)=>{
	const [val,setVal] = useState('')
    return (
    	...
	)
}

여기서 val은 값 setVal은 val의 값을 설정해줄 때 사용하는 함수라고 한다.
useState(초기값) 을 해주면 반환 값에 초기값을 지닌 값과 그 값을 설정해주는 set함수가 나온단다.

useEffect

이건 그나마 이해하기 쉬웠다. useEffect는 페이지에 변화가 있을 때, 다시 말해서 페이지에 요소가 처음 렌더링 되고, 생기고, 없어지고, 수정될 때 실행시킬 함수를 설정해준다.

import {useEffect} from 'react'
const test = ()=>{
	useEffect(()=>{
    	console.log('Rendering is completed');
    })
}

이 예시 코드는 페이지가 렌더링 될때마다 작동된다. 하지만 우리 똑똑한 엔지니어들은 최적화를 위해 특정 경우에만 작동하게 할 수 있다.

언제든 렌더링 될때마다 실행시킬 때

import {useEffect} from 'react'
const test = ()=>{
	useEffect(()=>{
    	console.log('Rendering is completed');
    })
}

똑같다

처음 마운트 되었들때만 실행시키고 싶을 때

import {useEffect} from 'react'
const test = ()=>{
	useEffect(()=>{
    	console.log('Rendering is completed');
    },[])
}

useEffect 2번째 파라미터가 감시 대상인데 비어 있으면 처음 마운트 될때만 나온다.

특정 변수의 변화가 있을 때만

import {useEffect,useState} from 'react'
const test = ()=>{
	const [name,setName] = useState('')
	useEffect(()=>{
    	console.log('Rendering is completed');
    },[name])
}

name에 변화가 있들 때만 반응한다. 근데 name이 화면에서 사라지거나 업데이트 되기 전에 함수를 실행시키고 싶을 때가 있을 것이다. 그때는 위 useEffect함수에서 하나만 추가하면 된다.

import {useEffect,useState} from 'react'
const test = ()=>{
	const [name,setName] = useState('')
	useEffect(()=>{
    	console.log('Rendering is completed');
        return (()=>{console.log('Before update or unmount');});
    },[name])
}

이렇게 return 값에 함수를 두면 해당 함수가 name이 화면에서 없어지거나 업데이트 되기전에 실행된다.

useReduce

이건 이해하기 좀 어려웠는데 useState인데 값을 마음대로 지정하는게 아닌 action에 따라 값이 변화하는 것으로 이해하면 될 것 같다. 기본적으로 useReduce(함수,현재값) 을 받는데 함수의 형태는

function reducer(state, action){
	Action과 state에 따라 값이 바뀌는 로직들
}	

이다. useReduce의 return값은 useState와 마찬가지로 현재 값을 나타내는 변수하나와 그 action을 받아와 그 값에 따라 값을 바꿔주는 함수 하나가 리턴된다.
예시코드는

import {useReducer} from 'react'
const Test = ()=>{
	function reduce(state,action){
    	swtich(action.type){
        	case 'addOne':
            	return {value:state+1};
            case 'minusOne':
            	return {value:state-1};
            default:
            	return state;
    }
    const [num,alterNum] = useReducer(reduce,{value:0});
    return(
    	<div>
        	<button onClick={alterNum({type:'addOne'})}>+1</div>
            <button onClick={alterNum({type:'minusOne'})}>-1</div>
            <span>num.value</span>
        </div>
}
export default Test;

여기서 reduce함수가 return 하는 값이 num에 설정이 된다.

useMemo

현재까지 나온 것들은 다 문제가 있다. 매번 값이 바뀌는 것 뿐만 아니라 화면이 렌더링 될때마다 useEffect로 설정된 모든 함수들이 다시 실행된다는 것이다. useMemo는 useEffect와 같지만 감시하고 있는 값이 바뀌었을 때만 작동한다.

useMemo(()=>{감시대상과 관련된 로직들},[감시대상(들)]}

useEffect랑 똑같다!