소개

React의 가장 큰 장점 중 하나는 Redux와 같은 state=management 패키지를 포함하는 경우 구성 요소와 애플리케이션의 최상위 수준 모두에서 상태를 유지할 수 있다는 것입니다. 오늘 저는 React State Hook에 대해 이야기하고 그것이 우리가 상태를 관리하고 가장 중요한 것은 관련된 코드를 정리하는 방식을 어떻게 변화시켰는지 이야기하고 싶습니다!

한눈에

Looking towards the docs useState()의 경우 사용 방법을 엿볼 수 있습니다.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

나는 무슨 일이 일어나고 있는지 설명할 것이지만, 아래에서 일을 하는 예전 방식을 살펴보자.

import React, { Component } from 'react';

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

    handleClick = () => {
        this.setState({ count: count + 1})
    }

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

이런, 우리 코드에는 아주 간단한 것에 대한 많은 인구가 있습니다. 입력useState ...

useState가 적용되는 방법

const [count, setCount] = useState(0); 줄에 주의를 기울이면 count 상태를 처리하는 분해된 메서드를 볼 수 있습니다. setCount 메서드는 상태 변경을 처리하는 이전 방식의 트리거링this.setState({})과 비교하는 기능으로 작동합니다.

이는 버튼에 대한 위의 코드 스니펫에서 적용되는 위치를 확인할 수 있습니다.

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

setCount는 일반적으로 훨씬 더 끌어낼 수 있는 모든 논리를 처리합니다. React State Hook 덕분에 코드가 훨씬 깨끗하고 읽기 쉽습니다.

결론

React Hooks는 놀랍도록 유용하고 시간을 절약해 줍니다. 더 많은 것들이 있으며, 모두 우리 개발자들이 언젠가는 마주하게 될 문제를 해결합니다. React가 처음이라면 이것이 게임의 판도를 바꿀 것입니다! 즐감하시고 언제나처럼 질문이 있으시면 댓글을 남겨주세요!

행복한 일요일!