오늘 챌린지반에서 다룬 React Hook에 대해 정리해보자!

Hook

2년전에 리액트를 처음 배우기 시작할때만 해도 Hook은 다음과 같은 의미를 가지고 있었다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. 구 React 문서

하지만 점점 리액트가 발전되면서 버전도 많이 생기고 Docs 페이지 조차 새로 만들며 업데이트를 진행한 결과

Hook을 사용하면 컴포넌트에서 다양한 React 기능을 사용할 수 있습니다. 내장된 Hook을 이용하거나 이를 결합하여 자신만의 Hook을 만들 수 있습니다. 이 페이지에는 리액트에 내장된 모든 Hook이 나열되어 있습니다.

요렇게 설명이 바뀌었다. 이제 Hook은 단순히 class와 lifecycle에 얽매이지 않고 그저 React의 기능으로 설명할 수 있다. 2년 사이에 많은 것이 변했다.

State Hook

그래도 기능 자체는 변하지 않았다. 우선 State부터 알아보자.
구 버전에서는 State Hook이 useState 뿐이었지만 현재는 useReducer가 추가로 생겼다.

문서에는 다음과 같이 다루고 있다.

State를 통해 컴포넌트는 사용자 입력과 같은 정보를 “기억”할 수 있습니다. 예를 들어, 폼 컴포넌트는 state를 사용하여 입력값을 저장할 수 있고, 이미지 갤러리 컴포넌트는 state를 사용하여 선택한 이미지 인덱스를 저장할 수 있습니다.

컴포넌트에 state를 추가하려면, 다음 Hook 중 하나를 사용하세요.

• useState는 직접 업데이트할 수 있는 state 변수를 선언합니다.
• useReducer는 reducer 함수 내부의 업데이트 로직을 사용하여 state 변수를 선언합니다.
  
  출처

사용 방법은

function example(){
  const [test, setTest] = useState(0);
}

요렇게 사용한다.

이 state의 변경을 위해서는

function example(){
  const [test, setTest] = useState(0);
  const handleButton = () => {
    setTest(test+1)
  }
  return (
  <>
      <p>{test}</p>
      <button onClick={handleButton}></button>
  </>
  )
}

요런 방식으로 setter함수를 사용하여 상태를 관리 할 수 있다.

Effect Hooks

useEffect함수도 예전에 알던 설명과 많이 변한 듯 하다.
구 문서에는

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다.

💡팁
React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.
출처

요 문구 때문에 면접 준비와 사용 방법에 대해 공부 할 때 React의 life cycle에 대해 공부했던 기억이 있다. 하지만 요즘 문서에는 라이프 사이클은 다루지 않고 있다. 우리는 그저 React의 기능 에 대해서만 다루고 있다.

Effects를 통해 컴포넌트를 외부 시스템에 연결하고 동기화할 수 있습니다. 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함됩니다.

useEffect는 컴포넌트를 외부 시스템에 연결합니다.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effect는 React 패러다임의 “탈출구”입니다. 애플리케이션의 데이터 흐름을 조정하기 위해 Effect를 쓰지 마세요. 외부 시스템과 상호작용하지 않는다면, Effect가 필요하지 않을 수도 있습니다.

useEffect에는 타이밍 차이가 있지만 거의 사용되지 않는 두 가지 변형이 있습니다.

• useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행됩니다. 여기에서 레이아웃을 계산할 수 있습니다.
  
• useInsertionEffect는 React가 DOM을 변경하기 전에 실행됩니다. 라이브러리는 여기에 동적 CSS를 삽입할 수 있습니다.
  출처

React에서는 이제 class를 잘 안쓰게 되면서 함수형 컴포넌트에 대한 설명으로 완전히 넘어간듯 하다. 요런 사실을 알기 위해서는 Docs를 생각보다 좀 자주 읽어야겠다 생각했다. 고작 2년만에 많은 설명이 바뀌었다. 나름 기술 동향이나 이런 걸 자주 봐야겠다! 생각은 했지만 잠깐만 한눈을 팔아버리면 세상이 변했나 싶을정도로 기술 발전이 빠르다 보니 쫓아가기가 쉽지 않다. 이런 작은 설명 조차 바뀌어버리니 자주 찾아봐야겠다.