React Hook 개요 21.05.11

in Dev on React


  • Hooks : class component를 사용하지 않고도 function component에서 state와 다른 React 기능들을 사용할 수 있도록 만들어준다.

Hook의 장점

  • 호환성 : 이전 버전과의 100% 호환된다. Hook은 호환성을 깨뜨리는 변화가 없다. 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다.

  • 직관성 : Hook은 알고 있는 React 컨셉을 대체하지 않는다. 대신에, Hook은 props, state, context, refs, lifecycle method와 같은 React 개념에 좀 더 직관적인 API를 제공한다. 또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공.

  • 컴포넌트 상태 로직 재사용 가능

  • 이해하기 쉬운 컴포넌트 구성

내장 Hook

useState

  • State : 내부에서 변하는 값 (ex : 토글 스위치, 카운터, 시계 등). 컴포넌트 안에서 다뤄지고 업데이트 할 수 있다. setState로 state가 변경 되면 다시 렌더링 하여 사용자에게 변경된 state 값을 보여준다.

  • useState : function component에서 state를 다루는 특별한 함수. useState 를 호출하면 배열을 반환하는데, 배열의 첫 번째 요소는 현재 state 변수이고, 두 번째 요소는 이 변수를 갱신할 수 있는 함수다. useState의 인자로 넘겨주는 값은 state의 초기값이다.

  • syntax

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);
  • ex code
import React, { useState } from 'react';

function Example() {
  // 배열 구조 분해 할당으로 "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // setCount로 state를 변경 가능.
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • 여러 state 변수 선언 사용 가능. this.state와는 달리 setState Hook의 state는 객체일 필요가 없다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용.
function Test() {
    const [age, setAge] = useState(20);
    const [job, setJob] = useState('Frontend Developer');
    const [todos, setTodos] = useState([{ text: 'Learn React Hoooks'}])
}
Effect Hook : useEffect
  • useEffect : function component 내에서 side effect를 수행 할 수 있게 해준다. Life Cycle Method(componentDidMount, componentDidUpdate, componentWillUnmount) 대체 가능.

기본적으로 React는 렌더링 될 때마다 useEffect 실행 useState와 마찬가지로 컴포넌트 내 여러 개의 effect 사용 가능.

  • Side Effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인. 대표적인 사례는 네트워크 요청(백엔드 API 요청)

  • syntax : useEffect의 2번째 인자에 의존하여 업데이트. state, prop에 종속되지 않고 원하는 변수 변화에 따른 함수 실행 설정이 가능하다.

const 컴포넌트 함수명 = (프롭스) => {
  
  useEffect(() => {
    // 컴포넌트 마운트 시, 이 부분의 코드를 실행(=== componentDidMount)
    // 데이터 업데이트 시 이 부분의 코드를 실행(=== componentDidUpdate)

    return () => {
      // 데이터 업데이트 시 이 부분의 코드를 실행 (=== componentDidUpdate)
      // 컴포넌트 언마운트 시 clean up (=== componentWillUnmount)
    }
  }, 2번째 인자)
}

// 2번째 인자가 변경 될 떄마다 useEffect 실행
//  useEffect의 2번째 인자에 의존하여 업데이트. 
// state, prop에 종속되지 않고 원하는 변수 변화에 따른 함수 실행 설정이 가능하다.
  • ex code 1 : useEffect 사용 방법
// [React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트]

// import react, useState, useEffect 
import React, { useState, useEffect} from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 비슷
  // 기본적으로 React는 렌더링 될 때마다 useEffect 실행.
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀 업데이트
    documnet.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => seCount(count + 1)}>
        click me!
      </button>
    </div>
  );
}
  • ex code 2 : useEffect 해제 방법 (option)
// [친구의 접속 state를 구독하는 effect 사용, 구독을 해지하면 effect 해제]

import react, { useState, useEffect } from 'react';

function FriendsStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // 컴포넌트 해제
    return () => {
      ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    }
  }) 
}
// Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다.

Hook 사용 규칙

  1. 최상위에서 Hook을 호출해야 한다. 반복문, 조건문, 중첩 함수 내에서 Hook을 실행하지마라.

  2. React function component 내에서만 Hoo을 호출 해야한다. (일반 자바스크립트 함수에서는 안됨)




© 2020.11. by creamer

Powered by CREAMer