Hooks

class의 복잡함을 이용자 편의에 맞게 단순화 시킨 함수형 component
React document의 예시를 보면 차이점이 확 느껴진다. 같은 state를 호출하는 컴포넌트지만, hook state의 코드가 훨씬 간결하다.

class component 예시

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

React Hook component 예시

import React, { useState } from 'react';

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

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

---

useState

간단하게 useState 예시를 작성했다.

useState의 변수 선언은 const [변수명, 변수 갱신 함수명]으로 하고, 초기 인자는 변수에 담길 데이터 타입을 담는다. 변수 갱신 함수명의 인자는 변수의 값을 초기화하고, useState가 해당 값을 자동으로 렌더링해준다. 즉, 우리가 신경 쓸 부분은 어떤 타입의 변수를 담을지, 어떤 값으로 갱신할 것인지 두 가지로 줄어든다.

상기 코드에서는 input의 타입이 text이므로 빈 문자열("")을 초기값으로 설정했고, onChange 함수를 통해 input의 value를 받아와 변수를 갱신했다. 바뀐 변수값은 useState를 통해 즉시 렌더링되어 출력 박스에 노출된다.

---

사용자 정의 hook

useInput

함수형 컴포넌트의 특성을 이용해 특정한 기능을 가진 hook을 만들 수 있다. 강의에서 배운 useInput hook은 입력된 값을 유효성 검사 함수에 맞게 제한하는 기능을 가졌다.

useInput의 인자는 useState의 초기값과 유효성 검사 함수다. 맨 아래 컴포넌트를 보면 value 길이를 10이하로 제한하는 maxLan함수를 만들어 useInput hook에 넣었다. input에 값을 입력해 보면 10글자 이후로는 입력되지 않음을 확인할 수 있다.

useTaps

다음은 useTaps hook이다.

탭을 누르면 내용이 바뀌는 기능으로, useTaps는 두 개의 값을 리턴한다. curruntItem은 현재 인덱스에 해당하는 내용이고, changeItem은 현재 currentIndex를 갱신하는 함수다.

useTaps은 처음에 0과 content를 받아 changeItem은 content[0]을, changeItem은 setCurruntIndex(0)를 갖고 있다.

content.map을 통해 생성된 두 개의 버튼은 각각 index(0)과 index(1)에 해당한다. onClick 이벤트의 changeItem은 이 index를 가지고 있다가, 만약 Section 2 버튼을 클릭하면 setCurruntIndex(1)로 갱신한다.

curruntIndex의 값도 1이 되므로, curruntItem은 content[1]을 담는다.

---

참고
리액트 hook useState 문서: https://ko.reactjs.org/docs/hooks-state.html
노마드코더 실전형 리액트 hooks: https://nomadcoders.co/react-hooks-introduction/lobby