React Hook

 

React를 공부하면서 알게된 기능을 간단하게 정리해본다. 이후 상세하게 파고들어봐야겠다.

 

React가 지원하는 Hook

 

상태 관리를 위한 useState()

value에 해당하는 값을 관리할 수 있고 setter를 호출하여 value의 값을 변한다.

이때 value에 객체를 선언하여 전체적으로 변경할 수도 있다.

 import {useState} from 'react';

 const [value , setter] = useState({초기화 값});

 

조건부 이벤트핸들러 역할의 useEffect()

useEffect는 렌더링 이후에 실행되고, 특정 조건을 만족하면 호출하여 실행하도록 설계한다.

import React, { useEffect } from 'react';

useEffect(()=>{
        if(postAdded){
            setText('');        
        }
}, [postAdded])

 

컴포넌트의 성능을 최적화 하는데 사용되는 훅

 

값을 저장하는 useMemo()

동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 막고 메모리를 효율적으로 쓰게하는 기능.

객체도 저장 가능함으로 styled-component처럼 컴포넌트 최적화에도 사용할 수 있다.

import { useMemo } from 'react';

const style = useMemo(() => (
	{ marginBotton:'20px', border:'1px colid #d9d9d9', padding:'20px'}
   	),[])

 

 

함수를 저장하는 useCallback()

useCallback()  또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다.useMemo()와 다른 점은 useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 하는 것이다.

import React, { useCallback } from 'react';

const onSubmit = useCallback(()=> {
	if(password !== passwordCheck){
        return setPasswordError(true);
    }
    if(!term){
        return setTermError(ture);
    }
},[email,password, passwordCheck, term]);

 

DOM 요소에 접근하기 위해 사용하는 useRef()

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. Ref는 reference를 의미한다.

자바스크립트의 querySelector와 유사.

 

input 태그의 요소를 참조해 오기 위해 사용한 예시

import React, { useRef } from 'react';

    const imageInput = useRef();
    
    const onClickImageUpload = useCallback(()=>{
        imageInput.current.click();
    },[imageInput.current]);
    
    
    //...
    <input type='file' multiple hidden ref={imageInput}/>