[React] Hook에 대해 알아보자. 그런데 useState 등을 곁들인

다들 Hook부터는 어려워진다. 인강을 들어도 이해하는게 힘들다고하는데 역시나 쉽지 않다. 그래서 나름 시리즈(?)에 걸쳐 Hook과 useState, useRef, useMemo에 대해 포스팅 하려고한다. 

 

Hook이란 뭘까?

"기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다"

 

특징 

- 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 

이러한 훅은 함수의 최상위 레벨에서만 정의한다. 조건으로 훅을 할당하지 않는다. 렌더링 될 때 항상 같은 순서로 렌더링이 되야 한다

 

공식문서의 글을 읽어보면 간결하게 사용할 수 있게 한다고 이해할 수 있다. 

 

📌 useState

변수의 변화를 감지하여 재렌더링하게 해주는 훅으로 “Hook”에서 처음 배우게 될 함수이다.

{ useState } 로 import 구문에 추가해서 쓸 수 있다. 

const [변수, 변수를 변경할 수 있는 함수 ] = usetState( 초기값 );

useState를 사용하면 변수가 변경될 때마다 다시 그려줘야하는애구나! 라는 걸 알게 된다. 즉, 변수가 변할때마다 다시 그려줘야한다는것을 안다.

 

const likeState = useState(0);
const like = likeState[0];
const setLike = likeState[1];

const [like, setLike] = useState(0);

위의 세 구문을 하나로 줄인것이라고 이해하면 된다. 

 

✅ 굳이 useState를 써야하는 걸까?

일반 변수는 변수의 값이 달라질때마다 재렌더링하는 코드가 필요한데 useState를 사용하면 setState()를 통해 자동으로 렌더링해서 Dom에 적용한다. 

예를 들면, sns의 좋아요를 누르면 숫자가 변경되는 기능이 있다. 

 

결론 : 변하는 값이 있다? -> 컴포넌트로 만든다 -> useState를 사용한다 

📌 useEffect

배열에 묶인 state를 감지하여 재렌더링하게 해주는 훅이다. { useEffect } 로 import 구문에 추가해서 쓸 수 있다. 

useEffect(함수, 감시대상(여러개 넣어줄 수 있음))

useEffect( () => {   
    console.log('sample') 
}, [감시대상1, 감시대상2 ])

감시대상을 적어주면 감시대상이 변할때마다 안의 함수를 실행해준다. 만약 감시대상이 없으면 최초의 한번만 실행된다. 

 

💡 useState와 useEffect를 같이 쓰는 이유

useState와 useEffect는 같이 자주 쓰이는데 그 이유는 useState는 비동기적으로 실행하기 때문에 뒤의 코드가 먼저 혹은 동시에 실행 될 여지가 있어서, 순서대로 실행되어야 한다면 useEffect를 사용한다. useEffect가 동기로 바꿔주면서 순서를 잡아준다.

 

📌 useRef

레퍼런스를(특정 객체에 접근) 사용하기 위한 훅이다. 

• 렌더링과 상관없이 값을 변경하고 싶을 때
• 컴포넌트의 태그(tag)에 직접 접근하고 싶을 때

이럴 때 사용하면 된다.

const 변수 = useRef(null);
ref={변수} 

 "변수"인 객체를 전달한다. 

 

📌 useMemo

연산이 많이 들어가는 객체를 저장해 두었다가 사용하기 위한 훅으로 최적화에 사용된다. 

const result = useMemo(() => {
    return 부하()
  }, [])

useMemo에서 result라는 변수를 미리 기억해두기때문에 빨라진것이다. , [] 여기는 감시할 애들을 배치하는데 만약 일정한 값을 계속 계산해야한다면 그 값을 [] 안에 써주어야한다.  (변경되는 변수명을 명시하는것이다)

 

 

오늘의 총정리

.- 렌더링 전 : `useMemo` / 렌더링 후 : `useEffect`
- 상태 변화를 감지하여 effcet를 동작하게 하고싶다면 `useEffect`
- 값을 저장하여 불필요한 동작 또는 렌더링을 막아 최적화하고 싶다면 `useMemo`

 

 

 

참고 자료

- react 공식문서
- 제주코딩베이스캠프 '지금 바로 React 시작하기'