[React]Hook

❓React Hook란?

React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다

 

❓What Is State Hook?

기존 React함수 컴포넌트에서는 state를 지정할 수 없었기 때문에 
이의 대안으로 Hook을 사용하여  state를 지정해 주는 것을 State Hook라고 한다.

 

📌useState?

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다

##배열을 반환하고 state 변수, 해당 변수를 갱신할 수 있는 함수를 각각 반환한다.
##(배열 구조 분해) 인자 값으로 state변수를 초기화한다.

//usestate 사용 예시
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

 

🔨useState 사용법

🏅useState 불러오기

useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다

import { useState } from "react";

 

🥇state 변수 선언하기

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

 

🥈state 변수 가져오기

함수 컴포넌트에서 count값 가져오기

 //usestate의 count를 직접 사용할수 있습니다.
 <p>You clicked {count} times</p>

 

🥉state 변수 갱신하기

갱신하기 위해서는 setState함수를 호출하여 갱신하여야 합니다.

 //usestate로 선언한 함수 컴포넌트는 바로 setstate를 불러올 수 있다
<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

 

❓What Is Effect Hook?

컴포넌트 내에서 side effects를 수행할 수 있도록 도와주는 Hook이다. 

 

📌side effects?

Side effect는 반환 값 이외에, 호출된 함수 밖에서 관찰할 수 있는 애플리케이션의 상태 변경 등의 부수효과들을 한대 모아 의미한다. 
데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다

side effects 종류

• Clean-Up (정리가 필요한 것)
  • 외부 데이터를 추가하여 사용하는 경우
  • 실행 후 신경 쓸 것이 있는 경우
  • ex) 외부 데이터에 subscription을 설정하는 등의 메모리 누수가 발생하지 않아야 하는 경우
• else (그렇지 않은 것)
  • React가 Dom을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우
  • 실행 후 신경 쓸 것이 없는 경우
  • ex) 네트워크 리퀘스트, DOM  수동 조작, 로깅 등....

 

🔨useEffect 사용법

🏅useEffect 불러오기

useState를 이용하기 위해서는 React로부터 useEffect를 불러와야 합니다

import { useState , useEffect} from "react";

 

🐓Clean-Up (정리가 필요한 것)

정리가 필요한 경우..
데이터를 계속해서 저장하고 정리하는 과정이 필요하기 때문에 값이 바뀔 때마다 함수를 리턴하여 반환할 수 있다.
))반드시 함수를 반환해야 하는 것은 아님!

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

 

🐤else (그렇지 않은 것)

정리가 필요하지 않은 경우...
렌더링 될 때마다 받아오는 값을 최신으로 받는다. 언제나 최신의 값을 가지고 렌더링 하기 때문에 함수의 내용과 Effect은 전부 교채 됨 고로 아무것도 반환할 필요가 없다.

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  //화면에 떠잇는 count값을 항상 최신 데이터로 받아온다.

 

🏹React Hook필요성

가장 좋은 점은  함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다이다.

클래스 컴포넌트의 경우에는 this.count 등으로 값을 불러오지만 Hook의 경우 직접 컴포넌트에서 호출하기 
때문에 타이핑 양도 줄어들고 코드의 가독성을 높일 수 있고 함수 이기 때문에 모듈화도 싶다.

클래스 컴포넌트로 함수 불러오기

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

함수 컴포넌트초 함수 불러오기

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

 

🔥React Hooks 사용 규칙

👆최상위(at the Top Level)에서만 Hook을 호출해야 합니다

반복문, 조건문 , 혹은 중첩된 함수 내에서 Hook을 호출하면 안 됩니다!
React가 Hook이 호출되는 순서에 의존하기 때문에 상단이 아닌 다른 함수의 내부에서 실행하게 되면 호출 순서가 달라지게 되기 때문입니다.

//반대로 hook안에 조건문을 작성하는 것은 가능합니다.
useEffect(function persistForm() {
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

 

👆오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출하면 안 됩니다!
커스텀 Hook과 관련한 자세한 내용은 '나만의 Hook 만들기' 포스팅을 참고하자. 이 규칙을 따르면 해당 컴포넌트의 상태와 관련한 모든 로직들을 소스 코드 상에서 명확하게 보이도록 할 수 있다.

 

https://ko.reactjs.org/docs/hooks-custom.html

자신만의 Hook 만들기 – React