React Hooks는 라이브입니다. 여기 당신의 소개입니다

수업은 React를 배우는 데 큰 장벽이 될 수 있습니다. says React 팀. 축소가 잘 되지 않으며 핫 리로딩을 신뢰할 수 없게 만듭니다. React Hooks를 사용하면 함수 구성 요소를 클래스 구성 요소로 변환할 필요가 없습니다. 함수 구성 요소에서 상태 및 수명 주기 메서드를 사용할 수 있습니다.

좋습니다. 하지만 후크가 실제로 무엇인가요?

"hook" into 함수 구성 요소의 내부 상태 및 수명 주기 기능에 반응할 수 있는 함수입니다.

엄청난! 어떻게 해야 하나요?

먼저 프로젝트에서 React 및 React DOM 종속성을 업데이트합니다. Hooks는 오늘 React 16.8.0에서 새롭게 출시되었습니다!

npm install --save react@^16.8.0 react-dom@^16.8.0

이제 useState 후크를 살펴보겠습니다. 데모는 다음과 같습니다.

useState 후크

비교를 위해 상태가 있는 간단한 클래스 구성 요소가 필요합니다. 내가 상상할 수 있는 가장 쉬운 예는 입력 형식입니다.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

이제 useState 후크를 사용하여 다시 작성해 보겠습니다. 항상 react를 작성할 필요가 없도록 React.useState 패키지에서 가져옵니다.

import React, { useState } from 'react';

이제 NameForm를 함수 구성 요소로 변경합니다.

function NameForm(props) {}

useState hook은 초기 상태인 하나의 인수를 사용하며 현재 상태와 상태를 업데이트하는 데 사용할 수 있는 함수의 두 값을 반환합니다. 생성자에서 상태 초기화를 바꿀 수 있습니다.

this.state = { value: '' };

이것으로:

function NameForm(props) {
  const [value, setValue] = useState('');
}

상태 변수를 선언할 때 대괄호 사용에 주의하십시오. 이것은 ES6 "array destructuring "구문이며 useState 에서 반환된 첫 번째 값을 value 에 할당하고 두 번째 값을 setValue 에 할당한다는 의미입니다.

따라서 이것은 value라는 이름의 상태가 있고 setValue 함수를 호출하여 업데이트할 수 있음을 의미합니다. 우리의 render 메소드에서 사용해봅시다:

function NameForm(props) {
  const [value, setValue] = useState('');

  return (
    <form>
      <label>
        Name:
        <input
          type="text"
          value={value}
          onChange={event => setValue(event.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Onchange 소품은 더 이상 handleChange 메서드를 호출하지 않습니다. 대신 setValue 함수를 호출하여 state 를 업데이트하는 화살표 함수가 있습니다. 아, 그리고 클래스 구성 요소의 this.setState와 달리 후크를 사용하여 상태 변수를 업데이트하면 병합하는 대신 항상 교체합니다.

여러 상태가 있습니까?

그런 다음 필요한 만큼 useState를 호출하십시오.

function SimpleForm(props) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [age, setAge] = useState('');

  return (
    <form>
      <label>
        First Name:
        <input
          type="text"
          value={firstName}
          onChange={event => setFirstName(event.target.value)}
        />
      </label>
      <label>
        Last Name:
        <input
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />
      </label>
      <label>
        Age:
        <input
          type="number"
          value={age}
          onChange={event => setAge(event.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

useState 훅으로 끝입니다.

소품에서 초기 상태 설정

오, 정말 쉬워요!

function SimpleForm(props) {
  const [firstName, setFirstName] = useState(props.firstName);
  const [lastName, setLastName] = useState(props.lastName);
  const [age, setAge] = useState(props.age);

  //...
}

ReactDOM.render(
  <SimpleForm firstName="JOHN" lastName="Edward" age={30} />,
  document.getElementById('root')
);

상태에서 개체를 사용할 수 있습니까?

확신하는! 클래스state가 개체 또는 배열을 허용할 수 있는 것처럼 useState도 개체 또는 배열을 가질 수 있습니다. 하지만 제대로 작동하도록 입력 요소에 이름 소품을 추가해 보겠습니다. 또한 spread properties을 사용하여 상태를 업데이트합니다.

function SimpleForm(props) {
  //create object state
  const [form, setForm] = useState({
    FirstName: '',
    LastName: '',
    age: '',
  });

  const handleChange = event => {
    // use spread operator
    setForm({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  return (
    <form>
      <label>
        First Name:
        <input
          type="text"
          name="firstName"
          value={form.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last Name:
        <input
          type="text"
          name="lastName"
          value={form.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Age:
        <input
          type="number"
          name="age"
          value={form.age}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

배열은 어떻습니까?

이것은 약간 특이하지만 클래스state에서와 마찬가지로 그렇습니다. 배열 업데이트에 concat을 사용합니다.

function SampleArrayState(props) {
  //create array state
  const [nameArray, setNameArray] = useState(['Carl']);

  const updateArray = () => {
    setNameArray(nameArray.concat('John'));
  };

  return (
    <React.Fragment>
      <button onClick={updateArray}>Click me!</button>
      <div>{nameArray.toString()}</div>
    </React.Fragment>
  );
}

그리고 부울?

여기에서 다뤘습니다.

function SampleBooleanState(props) {
  const [show, setShow] = useState(true);
  const visibility = show ? 'visible' : 'hidden';

  return (
    <React.Fragment>
      <h1 style={{ visibility }}>useState Hook is awesome!</h1>
      <button
        onClick={() => { setShow(!show) }}
      >{`${show ? 'Hide' : 'Show'} the Header!`}</button>
    </React.Fragment>
  );
}

후크 규칙

기억해야 할 중요한 점은 후크가 클래스 구성 요소에서 작동하지 않는다는 것입니다. 기능 구성 요소를 위해 만들어졌습니다.

중첩된 함수, 루프 또는 조건 내부에서 후크를 호출하지 마십시오.

일반 JavaScript 함수에서 후크를 호출하지 마십시오.

이쪽

결론

useState 후크를 사용하면 함수 구성 요소가 React의 내부 상태에 액세스하고 이를 업데이트할 수 있습니다. 상태는 문자열, 숫자, 부울, 배열 또는 객체와 같은 모든 데이터 유형이 될 수 있습니다. useState 하나의 인수(초기 데이터)를 받아들이고 현재 상태 값과 상태를 업데이트하는 데 사용할 수 있는 함수/메소드의 두 값 배열을 반환합니다.
useState 이상의 후크가 있지만 각각의 단일 포스트에서 각 후크를 다루겠습니다.

다음은 이 글을 쓰는 시점에서 사용할 수 있는 모든 목록built-in hooks(예, 사용자 지정 후크를 작성할 수 있습니다!)입니다. 다음 포스팅에서 다루도록 하겠습니다!

또한 스트레스 없이 React를 제대로 배우는 방법에 대한 책을 쓰고 있습니다. 확인하고 싶을 수도 있습니다here.

다음 시간까지!