React Hooks

프로젝트 진행하며 Hooks 설명을 위한 글입니다

 

 

# React Hook

 - 기존의 react에서는 class 컴포넌트 안에서만 state, lifecycle 메소드를 사용할 수 있었습니다.

 - 하지만 hooks가 도입되면서 function 컴포넌트 안에서도 state, lifecycle 메소드를 사용 가능하게 되었습니다.

 

# useState

 - state를 정의하고, setState 메소드를 만들 때 사용합니다.

 - useState는 인자로 state의 초기값을 받습니다.

 - useState의 반환값은 생성된 새 state 변수와, 해당 state 전용 state 변경 함수의 쌍입니다.

import React, { useState } from 'react';

const App = () => {
	const [name, setName] = useState('beemo');
    // 새 state 변수 name을 생성했습니다.
    // name의 값을 갱신할 때 setName이 사용됩니다.
    // state name의 초기값은 useState의 첫번째 인자로 받은 'beemo' 입니다.
}

 

# useEffect

 - function 컴포넌트의 lifecycle을 담당해주는 hook입니다.

 - 기존 class 컴포넌트의 componentDidMount & componentDidUpdate & componentWillUnmount가 합쳐진 개념이라고 생각하면 이해가 편합니다.

 - 컴포넌트가 렌더링 된 후의 다양한 side effect를 표현할 수 있고 (componentDidMount & componentDidUpdate), effect의 clean-up이 필요할 경우(componentWillUnmount) 에는 함수를 반환합니다. 반환된 함수에는 clean-up을 해줄 내용들이 들어 있습니다.

 - 첫번째 인자로는 함수, 두번째 인자로는 배열을 받습니다.

 - 두번째 인자로 주어진 배열이 비어 있다면 컴포넌트가 마운트될 때만 실행되고, 배열 안에 어떤 요소가 들어 있다면 그 요소를 dependency로 해서 첫번째 인자로 주어진 함수가 실행됩니다. (배열 안의 요소가 변할 때마다 함수가 실행됩니다.)

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import MainHeader from './MainHeader';
import SubHeader from './SubHeader';

const Header = () => {
	// 현재 location을 받아옵니다
    let location = useLocation();

	// 위에서 받아온 location을 state로 설정합니다.
    const [path, setPath] = useState(location.pathname); 
    
    // path state를 설정하는 함수입니다.
    const changeLocation = (path) => {
        setPath(path);
    };

    useEffect(() => {
        changeLocation(location.pathname);
    }, [location]); // 현재의 location이 바뀔 때마다 path state를 변경해줍니다.

    return (
    	<header>
    		{path === '/' ? <MainHeader /> : <SubHeader />}
        </header>
    )
};

export default Header;

 

### useEffect에 관해 오피스아워에서 들은 내용:

 

useEffect를 이용해서 클래스 컴포의 라이프사이클을 따라하려고 하면 안됨
 -> 최대한 함수형처럼 생각해야 함 (안에 있는 상태가 업뎃되는게 아니라 매번 새로 실행되는것)
 -> state 바뀌면 전체 컴포넌트 자체가 새로 렌더링됨
 -> 컴포에 종속된 state를 분리 가능
 -> 값이 바뀌는게 아니라 컴포넌트가 새로 만들어진다 -> useState가 state 변경 상태를 메소드로 가지고 있는 거야 => 그래서 바뀔때마다 리렌더링
 -> 항상 새롭게 할당 / 실행되고
 -> useEffect는 항상 컴포넌트가 렌더된 다음에 실행이 된다고 해Hooks => state를 컴포넌트에 종속시키지 않고 싶어서..

 

 

# useRef (추가예정입니다.)

 

 

 

 

레퍼런스 :

[ react 공식문서 ] :  https://ko.reactjs.org/docs/hooks-effect.html