[react] State와 Hook

 

State란 리액트의 중요한 개념 중 하나로, 컴포넌트 내에서 관리되는 변수를 말한다.

 

state는 값을 변화시킬 수 있다. 따라서 동적인 데이터(자주 바뀌는 중요한 데이터)를 사용할때 state를 사용한다.

리액트는 state가 바뀌게 되면 자동으로 render를 다시 해준다. (단순히 변수에 다른 값을 할당할 때는 render가 되지 않는다)

state를 변경할 때는 setState함수를 이용하여 변경할 수 있다.

 

솔직히 처음 공부했을 때는 뭔말인지 이해가 가지 않았다. 리액트를 여러번 사용해보면서 내가 익힌 것을 토대로 설명해보자면 state값이 바뀔 때 자동으로 render해준다는 것이 가장 중요한 개념인것 같다.

SPA의 장점은 새로고침 없이 자연스럽게 데이터를 다르게 보여주는 것인데, 이러한 역할을 하는 것이 state인 것이다. 단순히 변수에 데이터를 저장하면 재렌더링이 되지 않는다. 

 

 

 

setState

앞서 설명한 대로 state를 변경해줄 수 있는 함수이다.

 

setState( state => state + 1 );

 

 

setState는 클래스형 컴포넌트에서는 this.setState()로, 함수형 컴포넌트에서는 useState hook을 통해 사용할 수 있는데 요즘은 함수형 컴포넌트를 많이 쓴다.

 

Hook

---

hook은 리액트 16.8에 추가된 기능으로 클래스형 컴포넌트의 단점들을 보완하기 위해 나왔다. 

리액트에서 지원하는 내장함수들로는 아래 함수들이 있다.

 

기본 Hook

• useState
• useEffect
• useContext

추가 Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

Library Hooks

• useSyncExternalStore
• useInsertionEffect

 

 

 

useState

useState로 state와 setState를 사용할 수 있다.

useState를 import한 후 초기값을 설정해준 다음 setState를 이용해서 state의 값을 변경해준다.

 

import { useState } from "react";

function App(){
  const [count, setCount] = useState(0);
  setCount(count => count + 1);
}

 

 

 

useEffect

렌더링 후 실행될 코드를 작성해주거나, 특정 데이터가 변경될 때 실행될 코드를 작성해준다.

useEffect를 import한 후 첫번째 파라미터에는 실행될 코드를, 두번째 파라미터에는 의존성 배열이나 변경 시 코드를 실행시킬 데이터를 넣어준다.

 

import { useState, useEffect } from "react";

function App(){

  //컴포넌트 열릴 때 처음 한번만 실행될 코드
  useEffect(()=>{
  	console.log('hi')
  }, [])
  
  //데이터에 변경에 따라 실행될 코드
  useEffect(()=>{
  	console.log(data)
  },[data])
}

 

처음 컴포넌트 렌더링 시 실행시키고 싶은 코드를 작성하고자 할 때 두번째 파라미터에 [] 빈 배열을 넣어주지 않으면 무한루프되니 주의해야한다.

 

useEffect에는 컴포넌트가 끝날때도 (컴포넌트에 머물지 않을 때) 실행 될 코드를 작성해줄 수 있는데, 이를 clean up 함수라고 하며 return 다음에 작성해주면 된다.

 

import { useState, useEffect } from "react";

function App(){

  useEffect(()=>{
    console.log('hi')
 
    //cleanup 함수
    return ()=>{ console.log('bye') }
  }, [])
}

 

 

이 외의 hook들은 차차 업데이트 할 예정이다.