React - 함수형 컴포넌트 : hook함수(useState, useEffect, useCallback)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

  함수형 컴포넌트.
  : return값이 있는 function과 동일한 구조의 컴포넌트.
    부모컴포넌트에게서 props로 파라미터를 전달받아 사용할수는 있음.
    render함수가 없기때문에 return만 사용하여 화면을 그려줌.

    state가 없고, 생명주기 함수를 사용할수가 없음.
    
    * 함수형 컴포넌트 state가 없는 이유? state는 항상 변수의 유효범위가 관계없이 유지되어야하기 때문이다
      => 그래서 나온 대체 함수가 useState이다.

    함수형 컴포넌트에서 state와 생명주기 함수의 기능을 사용해야하는 경우 비슷한
    기능을 제공하는 hook을 추가하면 된다.

    대표적인 hook함수
    [1] useState() : state변수값을 선언하게 해주는 메소드. (setState메서드와 비슷한 역할)
    => 자료형은 배열이다.

    [2] useEffect(콜백함수) : 생명주기함수중 componentDidMount와 비슷한 역할을함

    [3] useCallback(콜백함수) : 매개변수로 들어간 콜백함수를 캐시에 저장하여 빠르게
    해당 함수를 실행할수있게 도와준다(성능최적화에 사용)

    캐시? 데이터나 값을 미리 저장하는 저장소. 빠르게 저장된 값을 가져오고자할때 사용.
    리액트 훅에서는 전연벽수를 캐시에 저장하여 상태값을 가질수 있게끔 컨트롤함. //; 캐시에 state상태값을 저장해둔다.

 

1. useState() 함수

        [1] useState() : state변수값을 선언하게 해주는 메소드

        [표현법]
        const [값을 담을 변수 , 값을 변경하는 setter함수] = useState(초기값);

        useState메서드는 길이 2짜리 배열을 반환해주며, 이를 구조분해할당을 이용하여
        반환된 값을 저장

        반환된 값을 담아줄 첫번째인자(count) : state의 변수명 
        반환된 값을 담아줄 두번째인자(setCount) : count값을 변경해주는 함수를 저장
                                                (setState와 비슷한 역할)

import {useState, useEffect, useCallback} from 'react';

function TestUseState(){
const [count, setCount] = useState(0);
function increment(){
        return setCount(count+1);
   }

   return (
        <div>
            <button onClick={increment}>증가</button>
            count :: {count}
        </div>
   )
}

export {TestUseState , TestUseEffect, TestUseCallback};

 

2. useEffect() 함수

        [2] useEffect() : 생명주기함수중 componentDidMount와 동일한 역할을 함.
        최초 페이지 로딩시 한번은 무조건 실행되고, "의존성 목록"이 바뀔때마다 다시한번 실행된다.

        [표현법] //; 동기적 실행보다 useEffect사용을 권장함 자주씀
        useEffect(    
            () => {
                // 랜더링이 완료된 후 실행할 코드.
                return 컴포넌트가 언마운트 될때 실행할 코드 (componentWilUnMount와 동일한 역할)
            }, [의존성 목록]
        )
        useEffect의 반환값으로 다시한번 콜백함수를 반환하게 되면 컴포넌트가 소멸할때 해당 함수를 실행
        시킨다(componentWillUnMount)
        
       => return문에 콜백함수 작성시 컴포넌트가 소멸될때 실행될 함수를 추가할수 있다.

import {useState, useEffect, useCallback} from 'react';

function TestUseEffect(){
const [count, setCount] = useState(0);

    const increment = () => setCount(count+1);

    useEffect(
        () => {
            // 페이지 랜더링이 완료된후, id값이 btn1인 요소를 찾아서 이벤트 부여
            const btn1 = document.getElementById("btn1");
            if(btn1){
                btn1.addEventListener('click',increment);
                return () => btn1.removeEventListener('click',increment); //;removeEventListener 쓰는 이유? 이벤트를 추가만하고 제거하지 않으면 페이지 내에 리소스가 계속 쌓여서 메모리 낭비 제거해줘야함.
                // 컴포넌트가 소멸할때 추가한 이벤트 제거.
                // 이벤트를 지워줘야하는 이유? => 1.메모리를 잡아먹기 때문에 지워줌 2.원치 않는 부작용이 발생할 수 있다.(사이드이펙트)
            	                                  return에서 제거해주어야 리소스 효율이 좋고 사이드이펙트 방지 가능.
            }
        //}, [] 의존성 목록 배열이 빈 상태일때는 증가값이 1에서 변경되지 않음
        },[count]
    );
    
    return (
        <div>
            <button id='btn1'>increment</button>
            count :: {count}
        </div>
    )
}

export {TestUseState , TestUseEffect, TestUseCallback};

 

3. useCallback() 함수

[3] useCallback(원본 콜백 함수, 의존성 목록) : 프로그램 성능 최적화작업에 사용되며,
                                             함수의 몸통(실행할코드)를 캐싱하는데 사용한다.

import {useState, useEffect, useCallback} from 'react';

function TestUseCallback(){
   const [count, setCount] = useState(0);

    const increment = useCallback(
        () => {
            setCount(count+1)
        //}, [] 의존성 목록 배열이 빈 상태일때는 증가값이 1에서 변경되지 않음
        }, [count]
    );

    return(
        <div>
            <button onClick={increment}>증가</button>
            count :: {count}
        </div>
    )
}

export {TestUseState , TestUseEffect, TestUseCallback};

 

import './App.css';

import { TestUseState , TestUseEffect, TestUseCallback} from './06_FunctionComponent';

function App3(){
    return(
    	<>
        // <div>
            <TestUseState/>
            <TestUseEffect/>
            <TestUseCallback/>
        // </div>
        </>
    )
}
export default App3;