[리액트] 함수형 컴포넌트 hooks 정리

 - 리액트 훅이란?

 life-cycle, state관리를 해주고 클래스형 컴포넌트의 기능을 사용할 수 있는 함수형 컴포넌트

 

-useState

 state(상탯값) 관리 가능

import React, {useState} from 'react';

  const [name, setName] = useState(''); 

배열에 두 값을 넣는다.

첫번째 원소는 상탯값 = state

두번째 원소는 상태값을 변경할 수 있는 함수

 

- useEffect

함수형 컴포넌트에서 life-cycle함수를 사용할 수 있게 해준다.

예시출처

import {useEffect} from 'react';


unction MyComponent() {
  const [count, setCount ] = useState(0);
  useEffect( ()=> {
    document.title = '업데이트 횟수 : ${count}`;
  }, []); //배열 입력!
  return <button onClick={ ()=> setCount(count +1) }> increase </button>
}

useEffect 훅에 입력된 함수는 렌더링 결과가 실제 돔에 반영된 후 호출

클래스형 컴포넌트의 componentDidMount 구현 가능

즉, 버튼을 누르면 다시 렌더링되고, 렌더링 끝나면 함수 호출됨 ( count+1)

렌더링 될때마다 호출되기 때문에 이를 방지하기 위해 두번째 매개변수에 배열을 입력하면 배열의 값이 변경되는 경우에만 함수가 호출된다!!! 빈 배열 []을 넣어놓으면 한번만 호출된다.

 

- useSelector

리덕스의 상태값을 조회, connect를 통해 조회하는것보다 간결하게 사용 가능

import { useSelector } from 'react-redux';


const 변수명 = useSelector(state => state.리듀서모듈명.스테이트값)

 

- setState

컴포넌트의 state 객체에 대한 업데이트를 실행. state가 변경되면 컴포넌트 리렌더링

state가 한번 생성되고 난 후, state를 바꾸기 위해 사용한다