React hooks

.·2022년 6월 30일

useCallback useEffect useMemo useRef useState

blog

목록 보기

15/52

[0] 설명

리액트 훅이란 초기에 리액트는 클래스 컴포넌트 형태로 작동을 하게 되었고 클래스 컴포넌트에서 사용되는 함수들을 함수형 컴포넌트에서 사용을 할 수 있게 해주는 함수이다.

[1] useEffect

[] 의존성 배열(dependency array)에 따라 다르다.

전부 실행되고서 실행이된다.

useEffect(()=>{

},[]) // 처음에만 실행, 클래스형 componentDidMount()와 동일

useEffect(()=>{

}) // 처음하고 매번 렌더링 될 떄 마다 실행

useEffect(()=>{

},[state]) // 상태값이 변할때만 실행, 클래스형 componentDidUpdate()와 동일

useEffect(()=>{
    return () => {
    };
},[]) // 사라질 때 실행, 클래스형 componentWillUnMount()와 동일


// 하나로 합쳐서 사용가능

useEffect(()=>{
    // 코드작성
    
    return () => {
        //코드작성
    };
},[])

(2) 하지말아야 할것들

// 초기에 2번 렌더링이 된다.
useEffect(()=>{
    setState(prev=>prev+1) 
},[])

// 무한 렌더링 발생
useEffect(()=>{
    setState(prev=>prev+1)
},[state])

[2] useState

리액트를 사용하면 필수적으로 알아야 하는 리액트 훅이다.
상태값이 변경이 되면 컴포넌트가 리렌더링이 된다.
단, useState에서 set으로 값을 넣어주면 비동기로 처리가되어서 바로 값이 변경이 되지 않는다
import React, { useState } from "react";

const 컴포넌트 = () => {
const [count,setCount] = useState(0);

const func = () => {
    setCount(1);
    console.log(count); // 처음에 눌렀을 때 0이 호출된다.
}

return (
    <div> </div>
);

}


## (1) prevState
> 이전의 state값을 아무 이름으로 불러와서 setState에서 사용하는 방법

그렇다고 해서 state에 값이 바로 들어가는 것은 아니다.

// 여기서 i는 이전 State값을 뜻한다. 초기값이 0이였을 때
setState(i=>i+1);
setState(i=>i+1);
setState(i=>i+1);
// 결과 3

//아래방식과는 차이가 있다. 초기값이 0이였을때
setState(state+1);
setState(state+1);
setState(state+1);
// 결과 1


## (2) 얕은 복사를 사용한다면 먹히지 않음
useState는 기존의 저장한 상태값이 변할때만 리렌더링을 하는데 얕은 복사로 상태값을 복사하고 값을 변경한 후에 setState()에 넣으면 기존의 State 와 얕은복사된 State는 같으므로 useState가 인지를 하지 못한다.

const [myIndex,setMyIndex] = useState({
false, 가 10번
})
const onClick = (event) => {
const aaa = [myIndex]; // const aaa = [...myIndex]; 와 같이 사용을 해야 작동이 된다.
aaa[Number(event.target.id)] = true;
setMyIndex(aaa);
}


# [3] useRef
* html 엘리먼트에 접근하여 DOM API를 사용할 수 있게 해준다.

* 랜더링이 되어도 값을 유지한다.

## (1) focusing

* useRef객체.current를 이용해서 엘리먼트에 접근을 가능하게 해준다.(포커싱 기능)

const inputRef = useRef(null);

useEffect(()=>{

},[]);

```

(2) setInterval, setTimeout

setInterval , setTimeout과 같이 함수를 초기화 시켜줄 때 사용한다.

const intervalRef = useRef(null);

useEffect(()=> {
    intervalRef.current = setInterval(()=>{
        
    },1000);
}, [] ;

const stop = () => {
    clearInterval(intervalRef.current);
}

(3) 변하지 않는 변수 관리

변하지 않는 값을 리랜더링 할 필요 없을 때 useRef로 값을 유지 할 수 있다. 리랜더링이 되어도 지정된 값은 유지된다고 한다. 무슨 말이냐면 state값이 변하면 리렌더링이 일어나는데 useRef는 변하지 않는다고 한다.
focusing, scroll위치 기억, 외부라이브러리로 생성된 인스턴스 보관, setTimeout,setInterval의 id의 값을 기억할 때 사용한다고 한다.

(4) 특정 요소 참조, 애니메이션

클릭 , 재생, 업로드 선택, 애니매이션 효과 재생 등을 할 때 사용을 한다.

fileRef.current?.click(); 가능

(1) 예제

 import React, { useRef } from "react";

const 컴포넌트 = () => {
    const reactRef = useRef();
    
    useEffect(()=>{
        reactRef.current.setAttribute(속성이름,값);
    },[]);
    
    return (
        <div ref={reactRef}>
        <div>
    );
}

(2) 타입스크립트 관련

useRef를 타입스크립트 용도로 사용할 떄 타입이 3가지 정도가 존재한다.
잘못사용하면 에러가 발생하는 경우가 있다.
const 숫자보관용도 = useRef<number>(0);
const DOM참조용도 = useRef<엘리먼트타입>(null):

태그명	엘리먼트
input	HTMLInputElement

[4] useMemo

리액트 훅이라는 것은 단순하게 말하면 메소드이다. 이 메소드는 클래스 컴포넌트에서 componentDidMount() , componentDidUpdate()와 같은 기능을 사용을 할 수 있게 해준다. 리액트 훅을 이용해서 생명주기를 관리할 수 있게 된다.
대표적으로 useState, useEffect, useRef 등이 존재한다.

리액트 훅	설명
useState	상태값을 저장하는 훅
useEffect	컴포넌트가 시작될 때, 특정 상태값이 변경될때 작동을 한다. ,클래스 컴포넌트의 mount,unmount,update 역할
useRef	DOM을 선택해서 참조할 수 있는 훅
useMemo	연산했던 값을 보관하고 사용하는 훅, (사용해본적이 없음)
useImperativeHandle
useLayoutEffect
useDebugValue

[5] useCallback

리렌더링을 할 때 특정 함수를 다시 만들지 않고 재사용할때 사용한다. 함수를 만드는 비용이 비싸지는 않지만... 렌더링이 되지 않는다면 좋기는 할 것이다.

useCallback으로 감싼 함수 내부에는 상태값을 넣어서 사용을 하면 작동이 되지 않는다. 그러므로 setSate((prev=>prev+1)와 같이 이전상태를 불러와서 사용을 하는 방식을 사용해야 한다.

[6] memo

훅은 아니지만 위에 useMemo와 useCallback과 같이 설명하기 위해서 이곳에 적어놓는다. memo는 컴포넌트를 재사용하기 위해 사용한다.