미련

머리말
페이스북이 개발한 리액트는 거대 소셜미디어 페이스북이 보다 효율적이고 관리하기 쉬운 코드에 대한 수요를 꾸준히 확장하는 데 대응하기 위한 것이다.React는 2013년에 발표되었고 처음에 개발자 커뮤니티에서 의문을 받았지만 곧 다기능성과 안정성을 증명했고 대량의 팀의 지지를 얻었다. 그들은 자신의 응용 프로그램이 더욱 빠르고 사용자에게 더욱 호응할 수 있는 방법을 찾고 있다.React는 구성 요소로 구성된 사용자 인터페이스를 구축하는 데 사용되는 소스 자바스크립트 라이브러리입니다. 이 구성 요소들은 속성을 받아들일 수 있고 UI의 일부분을 페이지에 어떻게 표시하고 DOM에 어떻게 표시하는지 설명합니다.응용 프로그램의 다양한 상태에 대해 보기를 설명하고 가상 DOM을 통해 업데이트와 다시 나타나는 통신을 처리하면 사용자가 변경 사항을 신속하게 볼 수 있습니다.자신의 상태를 관리하는 봉인된 구성 요소를 구축하여 코드를 구성하면 편집과 디버깅을 더욱 빨리 할 수 있다. 이것은 페이스북과 같은 대형 응용 프로그램에 매우 중요하지만, 어떠한 크기의 프로그램도 마찬가지로 편리하다.
REACT의 라이프 사이클
코드에 명확하게 설명되어 있든 없든 모든 React 클래스 구성 요소는 네 부분으로 구성된 생명 주기를 겪었다. 초기화(구성 요소는 도구와 기본 상태로 구축), 마운트(구성 요소가 DOM에 나타난다), 업데이트(구성 요소가 변경되고 응용 프로그램이 다시 그려진다).제거(DOM에서 구성 요소를 제거하고 관련 리소스를 해제)합니다.

class Clock extends React.Component {
  constructor(props) { //initializes class with props and state
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  //some code to run when component is rendered
  //maybe fetch some data
  }

  componentWillUnmount() {
  //perform cleanup after component is removed from DOM
  //cancel network request, clear a counter, etc
  }

  render() { //outputs its contents to DOM (required)
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date}.</h2>
      </div>
    );
  }
}

이전에는 클래스 구성 요소만 이러한 방법과 처리 상태에 접근할 수 있었다.기능 어셈블리는 DOM에 요소만 내보냅니다.React 개발자가 연결을 도입할 때 이 모든 것을 바꿨다.
우리 말 걸자.
연결고리는 2018년 이후 리액트의 실험적 기능이었으나 2019년 2월 발표된 리액트 버전 16.8에서 공식 출시됐다.갈고리는 클래스가 없는 상황에서 생명주기 구성 요소를 '갈고리' 하고 기능 구성 요소에 상태를 제공하여 더욱 짧고 읽기 쉬운 코드를 생성할 수 있도록 합니다.갈고리는 일종의'선택가입'기능으로 클래스와 완전히 호환되고 오래된 코드를 파괴하지 않으며 개발자가 기존 코드 라이브러리에서 쉽게 이를 실현할 수 있도록 한다.갈고리는 구성 요소를 짧고 달콤하게 만들 수 있습니다.

//a class component

import React from "react"

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         answer: 'Yes'
      }
   }

   render() {
      return (
         <div> 
            <h1> Is state important to know? {this.state.answer} </h1>
         </div>
      )
   }
}

export default App

//a functional component using hooks

//you must import hooks
import React, { useState } from "react"

function App() {
   const [ answer ] = useState('Yes')

   return (
      <div>
         <h1> Is state important to know? {answer} </h1>
      </div>
   )
}

export default App

가장 흔히 볼 수 있는 두 개의 갈고리는useState와useEffect이다.
useState()
이 방법은 표시할 상태를 관리합니다.그것은 수조 분해를 이용했다.첫 번째 값은 상태로 저장된 내용이고, 두 번째 값은 상태를 변경할 수 있는 함수입니다.

import React, { useState } from "react"

function App() {
  const [count, setCount] = useState(0) //default value is 0

  function increment() {
     setCount(prevCount => prevCount + 1)
  }

  return (
    <div> 
      <h1> {count} </h1>
      <button onClick= {increment}> Increment! </button>
    </div>
  )
}

사용 효과
Effect는 우리가 부작용을 만들 수 있도록 허락함으로써 생명주기 방법인 구성 요소 밖으로 가서 네트워크 요청을 하거나 이벤트를 감청하거나 DOM을 조작하는 것을 효과적으로 대체했다.이것은 리셋 함수와 그룹을 사용합니다. 감시할 변수를 지정할 수 있습니다.

//with no second argument, runs the function on every component render

useEffect(() => {
   functionCall()
},)

//replaces componentDidMount by putting array as second arg, runs once

useEffect(() => {
   functionCall()
}, [])

/* replaces deprecated componentWillUpdate by adding variables to the array 
that it will watch for changes on */

useEffect(() => {
   functionCall()
}, [watch, these, variables])


//replaces componentWillUnmount if returning function to clean up side effects

useEffect(() => {
   function doStuff() {
     //effect
   }
   return function cleanup() {
     //remove effect
   }
}, [])

그 밖에 리액션에는 더 높은 내장 갈고리:use Context,use Reducer,use Callback,use Memo,use Ref,Use Imperialive Handle,use Layout Effect,use Debug Value도 포함된다.프로그램의 요구에 맞는 복잡한 논리를 처리하기 위해 갈고리를 만들 수도 있습니다.
결론
React는 간단하지만 기능이 강한 라이브러리로 상호작용 사용자 인터페이스를 신속하게 구축하는 데 사용된다. 이러한 인터페이스는 자신의 상태를 포함하는 봉인 구성 요소로 분해되고 렌더링 방법의 많은 복잡성을 추상화한다.갈고리의 도입은 React 구성 요소를 더욱 간소화시켰다. 기능 구성 요소가 생명주기 방법을'갈고리'하도록 허용하고 여러 구성 요소에 걸쳐 상태 논리를 다시 사용할 수 있는 능력을 공유함으로써 복잡한 구성 요소를 불필요하게 만들었다.코드가 더욱 뚜렷하고 간결해지며 읽기와 추리하기 쉽다.가장 좋은 것은 갈고리가 낡은 React 코드와 완전히 호환되어 개발자가 가입을 선택하고 기존 프로그램에 도입하여 아무것도 파괴하지 않도록 하는 것이다.React의 많은 유용한 내장 갈고리를 사용할 수 있으며, 심지어는 자신의 갈고리를 만들 수도 있습니다.