React Hook 재정리

1. useState

useState는 가장 기본적인 Hook이고, 함수형 컴포넌트에서도 가변적인 state를 가질 수 있게 해준다.

만약 함수형 컴포넌트에서 state를 관리해야 하는 일이 발생한다면, useState하용하면 된다.

ex) const [value, setValue] = useState("")

단, 1개의 useState는 1개의 상태값만 관리할 수 있기때문에 여러 state를 관리하기를 원한다면 useState를 여러개 사용해야 한다.

 

2. useEffect

useEffect는 react 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있는 Hook이다.

클래스형 컴포넌트의 componentDidMount, componentDidUpdate 를 합친 형태로 봐도 무방하다.

 

ex)

useEffect(

    ()=>console.log("렌더링됨!")

)

 

화면에 처음 렌더링 될때만 실행되고 업데이트하는 경우에는 2번째 파라미터로 빈 배열을 준다.

ex)

useEffect(

    ()=>console.log("렌더링됨!"),

[]

)

 

특정 값이 업데이트 될 때만 실행하고 싶을 때는 class형 컴포넌트에는 componentDidUpdate를 썼겠지만, useEffect를 사용한다면

2번째 파라미터에 특정값 대상의 배열을 정해주면 된다.

 

ex)

useEffect(

    ()=>console.log("렌더링됨!"),

 [name]

)

 

useEffect는 렌더링 되고 직후에 동작하는데 렌더링 되고 언마운트 되기 전에 어떤 작업 수행하고 싶으면 return에 함수를 반환 해주면된다.

ex)

useEffect(

    ()=>{

    console.log("렌더링됨!");

    return () => {

         console.log("언마운트 되기 직전")

      }

  },

  [name]

)