왜 리액션을 해요?

본고에서, 우리는 왜 React 갈고리를 사용하는 것이 이렇게 효과적인지 이해하고, 더욱 깨끗한 코드를 작성하는 데 도움을 줄 것이다.
마지막으로, React 코드를 작성할 때, 우리는 React 갈고리가 업무 논리에서의 중요성을 연구할 것이다.
갈고리가 뭐예요?
연결고리는 React 16.8에 새로 추가된 기능입니다.
클래스를 작성하지 않은 상태에서 상태와 다른 특성을 사용할 수 있습니다.
갈고리는 일종의 기능으로 기능 부품의 반응 상태와 생명주기 특성을'갈고리'로 만들 수 있다.갈고리는 클래스에서 작동하지 않습니다. 클래스가 없는 상황에서React를 사용할 수 있습니다.
몇 가지 기본적인 반응 연결은 다음과 같다.
useState
사용 효과
useContext
보통 React Hooks 더 짧고 간결한 코드를 작성할 수 있습니다.
useState 갈고리란??const [state, setState] = useState(initialState);useState는 상태 값과 이 값을 업데이트하는 함수를 되돌려줍니다.
useEffect 연결이란??useEffect(didUpdate);명령적이고 유효한 코드를 포함하는 함수를 수락합니다.
useContext 갈고리란??const value = useContext(MyContext);컨텍스트 객체(React.createContext에서 반환된 값)를 적용하고 컨텍스트의 현재 컨텍스트 값을 반환합니다.
다음은 클래스 문법을 사용하는 간단한 계수기 구성 요소의 예를 살펴보고 갈고리를 사용할 때 비교한다.
이 예에서, 우리는useState 갈고리를 사용할 것이다
참고: 클래스 구문 사용

import React, { Component } from 'react'

class MyClassComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
    this.incrementCount.bind(this)
  }

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

  render() {
    return (
      <div>
        <p>Counter: {this.state}</p>
        <button onClick={this.incrementCount}>Increment Count</button>
      </div>
    )
  }

우리는 구조 함수에서count 상태를 위한 초기 값을 설정하고,incrementCount 방법이 있습니다. 단추를 누르면 이 상태를 추가할 때 이 방법을 호출할 수 있습니다.그럼에도 불구하고, 계수기와 같은 간단한 것들에 대해, 클래스 구조 함수를 이해하고, 슈퍼 (props) 를 호출하는 것을 잊지 않고,increment Count에 정확하게 연결할 수 있도록 대량의 코드를 작성해야 한다.
주의:useState 갈고리를 사용하는 예는 같습니다

import React, { useState } from 'react'

function MyFunctionComponent() {
  const [count, setCount] = useState(0)
  const incrementCount = () => setCount((countState) => countState + 1)

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  )
}

그럼 훨씬 쉬워졌어!나는 두 요소를 포함하는 그룹을 되돌려주는 use State만 호출했다.첫 번째는 관리 중인 상태에 대한 인용입니다.count라고 명명합니다.두 번째는 이 상태를 바꾸는 함수입니다. setCount라고 부릅니다.또한, 우리의 예시에서,useState에 전송된 모든 값이 -0이라고 할 때, 모두 초기 상태로 사용됩니다.
setCount은 "this.setState"와 매우 비슷합니다. 시간의 추이에 따라 상태를 업데이트할 수 있습니다.그런데도 불구하고.setState는 모든 상태 변경 사항을 통합합니다. setCount (또는useState의 모든 상태 설정 함수) 는 항상 이전의 상태를 덮어씁니다."incrementCount"는 현재 구성 요소의 함수입니다. 클래스 방법이 아니라.
State 갈고리는 함수 구성 요소 중의 클래스 구성 요소의 모든 상태 관리 기능을 제공하고 더 높은 갈고리 용례의 구축 블록이 될 것입니다.
위에서, 우리는useState 갈고리를 사용하여 간단한 시범을 보여 주었는데, 갈고리가React에서 구성 요소를 구축하는 것이 얼마나 쉬운지 보여 주었다

React 코드에서 React 갈고리가 업무 논리에 대한 중요성
만약 우리가 만든 구성 요소의 유형을 고려한다면, 그것들은 두 종류로 나눌 수 있다.첫 번째 클래스는 때때로 '무상태' 또는 '벙어리' 구성 요소로 불리는 구성 요소를 포함한다.이러한 구성 요소는 일반적으로 어떤 상태의 함수도 포함하지 않으며, 도구를 받아들이는 것 외에 환경과 상호작용을 하지 않으며, 주로 UI 표시와 관련이 있다.두 번째 클래스에는 환경 상호 작용, 데이터 처리, 사용자 상호 작용 제공 등에 사용되는 비즈니스 로직을 포함하는 상태 또는 스마트 클래스 구성 요소가 있습니다. 주의해야 할 것은 UI 코드는 무상태 구성 요소를 사용하여 쉽게 조합할 수 있지만 실제 비즈니스 로직은 작성된 상태 구성 요소에 잠겨 있습니다.그리고 우리는 어떻게 응용 프로그램에서 이 업무 논리를 공유합니까?React의 전체 라이프 사이클에서 이 점은 여러 가지 방식으로 처리되어 왔다.
Hooks가 개입하여 업무 논리를 공유하는 데 더 좋은 선택을 제공했다.우리는 더 이상 구성 요소에 의존해서 우리의 논리를 봉하지 않는다. 이것은 구성 요소 트리에 더 많은 복잡성을 은밀하거나 현저하게 주입할 것이다.반대로 갈고리는 함수로 존재하며 구성 요소 내에서 호출하여 구성 요소 간에 공유하고 그 자체를 더욱 복잡한 갈고리로 조합할 수 있다. 오, 그래, 사용자 정의 갈고리가 존재하고, 구성 요소 트리에 영향을 주지 않는다.모든 갈고리에 대한 호출은 현식이기 때문에 의존항이 숨겨지지 않고 개발자에게 명명 유연성을 제공하기 때문에 속성 충돌이 일어나지 않습니다.갈고리는 새것이기 때문에 우리가 고려하지 않았던 거친 가장자리와 장면이 있을 것이 틀림없지만 지역사회의 전면적인 도입에 따라 개선될 뿐이다.
갈고리의 최초의 외관과 느낌은 매우 좋다.또한 UI 구성 요소 및 비즈니스 로직을 비롯한 모든 응답을 기능으로 캡슐화할 수 있는 공유 비즈니스 로직의 가장 결합된 예입니다.이런 기능으로의 전환은 리액트의 전체 생명 주기 중의 진화 추세이고 갈고리는 이런 진화의 자연스러운 결과이다.그것들의 기능이 매우 강해서, 나는 우리 지역사회가 그것들을 어떻게 사용해서 더 좋은 소프트웨어를 만드는지 보고 싶어 죽을 지경이다.
만약 당신이 이 문장을 좋아한다면, 좋아하는 것과 평론을 잘 하세요.
나는 웹 개발에 관한 유용하고 교육적인 글을 더 많이 쓸 것이다.
내 웹 사이트 방문nkenganyiclovis.tech
트위터에 팔로우 해주세요.
링크드 인에서 따라와.
데일리 dev에 등록하여 소프트웨어 개발자의 신분으로 최신 업데이트와 뉴스를 얻기daily.dev