React : Hook (2018v)

2018년에 나온 Hook

Hook

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

 

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

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

- 100% 이전 버전과의 호환성을 보장합니다.

- 현재 사용가능 Hook은 배포 v16.8.0에서 사용할 수 있습니다.

 

Hook은 기존 React컨셉 이외의 객관적인 API를 제공합니다. 

 

State Hook

import React, { useState, Component } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

class Test extends Component {
    render() {
        return (
            <Example></Example>

        );
    }
}

export default Test;

- useState를 Hook 이라고 합니다.

- this.setState 유사합니다, but 이값을 업데이트하는 함수를 쌍으로 제공합니다.

- useState는 인자로 초기값 0을 지정합니다. count, setCount(function)

- 선언과 set함수를 동시에 설정할 수 있습니다.

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

- 여러 Hook을 선언하는 방법입니다.

 

Effect Hook

# componetDidMount, componentDidUpdate, componetWillUnmount와 같은 목적으로 제공하지만, 하나의 API로 통합

 

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

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

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

주석을 보시면 알겠지만 useEffect를 이용해서 DimMount함수를 사용하지 않고 useEffet를 사용해서 만들수 있다.

 

구독과 취소를 한번에

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

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

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

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

- return() 을 중심으로 위쪽은 컴포넌트가 생성되어 Dom실행후 구독을하고 unMount가 될때 return 안쪽에 구독취소를 불러온다 .

 

뒤쪽에 이야기는 React를 완벽히 이해하고 진행