React Hooks에 대해서 알아볼까요?

앞말

최근 React의 새로운 문법인 React Hooks을 보면 한마디로 요약할 수 있다. React 문법은 정말 점점 강해지고 코드를 쓸수록 줄어든다.
아직 React Hooks를 보지 않은 학생에게 공부하라고 강력히 추천합니다. 이것은 당신이react 프로젝트를 쓰는 것을 매우 시원하게 할 것입니다!
이전에 React 구성 요소는 무상태 구성 요소(function 정의)와 유상태 구성 요소(class 정의)로 볼 수 있다. React Hooks가 등장한 후에 우리의 기본적인 모든 구성 요소는 function 정의를 사용할 수 있다. 구성 요소를 포함하여 쓰기 class 문법의 복잡성을 기본적으로 폐지하고 코드를 함수식 프로그래밍으로 만들었다.

상태 훅스(useState)

여기서 설명하자면react의 모든 Hooks는 함수이고 함수는 특정한 기능을 실현하는 데 쓰인다.
useState는 구성 요소 state를 만드는 기능을 제공합니다.

const [count, setCount] = useState(0)

useState () 는 유일한 상태 초기값 파라미터를 받아들여 상태와 상태를 바꾸는 함수를 포함하는 수조를 되돌려줍니다. 여기는 수조 해체 방법으로 상태 변수count를 얻고 상태를 바꾸는 방법 setCount를 사용합니다.
강조 사항:
useState () 에 전송된 초기 값이 반드시 대상이 아닌 것은 아닙니다. 일반적인 데이터 형식, 예를 들어 Number, String 등입니다. 초기 값은 구성 요소의 첫 번째 렌더링으로 사용됩니다.
setCount () 는 새로운 state 상태를 받아들이고react는 원래의 state 상태를 전부 대체합니다. 이것은 setState () 와 다릅니다.
Example:

import React, { useState } from 'react';
function Example(){
  const [ count , setCount ] = useState(0);
  return (
    

      
You clicked {count} times
      {setCount(count+1)}}>click me
    
  )
}
export default Example;

Example 구성 요소를 페이지에 렌더링할 때 단추를 누르면count 상태를 실시간으로 바꿀 수 있고,react도 상태에 따라 페이지를 다시 렌더링할 수 있습니다.

부작용 작업 수행Hooks(useEffect)

이전에react 구성 요소를 쓸 때, 종종 우리는 구성 요소의 생명주기 함수에서 추가 작업을 한다. 예를 들어ajax 요청을 보내서 데이터를 가져오고, 타이머를 지우고, 비동기적으로 작업을 수행하는 등이다.
우리는 이러한 조작이 중복되는 코드가 매우 많고react 생명주기 갈고리에 익숙하지 않으면 오류가 발생하기 쉽다는 것을 발견했다. 그래서useEffect() Hooks가 나타났다.
useEffect()hooks는 react 함수식 구성 요소에서 추가 부작용을 수행할 수 있도록 합니다.
React 구성 요소에는 다음과 같은 두 가지 일반적인 부작용이 있습니다.

제거해야 할 것은, 예를 들어 켜진 타이머, 외부 데이터 원본 구독 등이다. 이런 조작은 구성 요소가 사라진 후에 제때에 제거하지 않으면 메모리 유출을 초래할 수 있다.

네트워크 요청 시작, 수동 DOM 변경, 로그 기록 등 삭제할 필요가 없습니다.

react 홈페이지에서 중요한 말이 있습니다.
만약 Reactclass의 생명주기 함수에 익숙하다면,useEffect Hook을componentDidMount,componentDidUpdate,componentWillUnmount 세 함수의 조합으로 볼 수 있습니다.
Example:

import React, { useState , useEffect } from 'react';
function Example(){
  const [ count , setCount ] = useState(0);
  useEffect(()=>{
    console.log(`You clicked ${count} times`)
  })
  return (
    

      
You clicked {count} times
      {setCount(count+1)}}>click me
    
  )
}
export default Example;

우리는 아까의 예에서 우리가 count 상태가 바뀔 때마다 컨트롤러에서 클릭한 횟수를 출력하는 기능을 추가했다.useEffect() Hooks를 사용하여 쉽게 수행할 수 있습니다.
강조 사항:

react의 첫 번째 렌더링과 그 후의 매번 렌더링은 useEffect 함수를 호출합니다. 이전에 우리는 두 개의 생명주기 함수로 첫 번째 렌더링 (componentDidMonut) 과 업데이트로 인한 다시 렌더링 (componentDidUpdate) 을 표시해야 합니다.

useEffect에 정의된 함수의 실행은 브라우저의 보기 업데이트를 방해하지 않습니다. 즉, 이 함수들은 비동기적으로 실행되고,componentDidMonut와componentDidUpdate의 코드는 모두 동기적으로 실행됩니다.

useEffect()에 두 번째 매개 변수를 전달할 수 있습니다. 이것은 하나의 수조이고 수조에서 이 부작용의 조작에 의존하는 상태 변수를 나타냅니다. 다시 말하면 이 부작용의 조작에 의존하는 상태 변수가 바뀌지 않으면 부작용 조작을 실행하지 않습니다.

구성 요소 간 값 전달 Hooks(useContext)

이전에 클래스 성명 구성 요소를 사용할 때 부자 구성 요소의 전가는 구성 요소 속성과props를 통해 진행되었습니다. 그러면 현재 방법 (Function) 을 사용하여 구성 요소를 설명합니다. constructor 구조 함수도 없고 props의 수신도 없습니다. 부자 구성 요소의 전가는 문제가 됩니다.React Hooks는 useContext를 준비했습니다.
useContext는 구성 요소의 등급을 뛰어넘어 변수를 직접 전달하고 공유를 실현하는 데 도움을 줄 수 있습니다.
Example:
1:createContext를 사용하여 컨텍스트 만들기

import React, { useState , createContext } from 'react';

//   CountContext
const CountContext = createContext()

function Example(){
  const [ count , setCount ] = useState(0);
  return (
    

      
You clicked {count} times
      {setCount(count+1)}}>click me
      {/*   context    ,context  value props */}
      
        
      
    
  )
}
export default Example;

2: useContext를 사용하여 컨텍스트 가져오기
context를 받을 후대 구성 요소는 useContext () Hooks를 도입하면 됩니다.

function Counter(){
  const count = useContext(CountContext)  // count
  return (
{count}
)
}

강조 사항:
useContext의 매개 변수는 context 객체 자체여야 합니다.

정답: useContext(MyContext)

오류: useContext(MyContext.Consumer)

오류: useContext(MyContext.Provider)

구성 요소 상단의 최근 업데이트가 있을 때, 이 훅은 다시 렌더링을 터치하고, 최근에 전달된contextvalue 값을 사용합니다.

더 복잡한state 구조를 처리하는 Hooks(useReducer)

앞에서 우리가 사용하는useState Hooks는 구성 요소에state와 조작을state 상태를 바꾸는 방법을 제공할 수 있지만, 때때로 우리의state 구조는 더욱 복잡하다. 예를 들어state는 여러 개의 하위 값을 포함하거나 다음state는 이전의state에 의존하는 등이다. 이때useReducer는useState보다 더 적합하다.
useReducer 사용법:

const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer는 (state,action) = > newState의reducer를 수신하고 현재state와 그에 부합된dispatch 방법을 되돌려줍니다.
우리는 use Reducer를 사용하여 우리의 개편 계수기의 데모를 다시 쓸 수 있다.
Example:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      return state
  }
}
//   Counter  
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    

      Count: {state.count}
       dispatch({type: 'increment'})}>+
       dispatch({type: 'decrement'})}>-
    
  );
}

redux에 익숙한 파트너에게 이런 글쓰기는 쉽게 이해할 수 있습니다. 매번 단추를 누르면action을 나누어 주고state상태 데이터를 업데이트합니다.
강조 사항:
React는 Redux에서 널리 보급된 매개 변수인 state = initialState를 사용하지 않습니다.때때로 초기 값은props에 의존하기 때문에 훅을 호출할 때 지정해야 합니다.만약 당신이 상술한 매개 변수 약속을 특별히 좋아한다면,useReducer(reducer,undefined,reducer)를 호출하여 Redux의 행동을 모의할 수 있지만, 우리는 당신이 이렇게 하는 것을 장려하지 않습니다.
이것은react 홈페이지에서 제공하는 한 마디입니다. 즉, state에 초기 값을 제공할 때redux에서 ES6 기본 파라미터를 이용하여 지정할 수 없습니다. 반드시useReducer를 통해 지정해야 합니다.이것을 명심해라, 나도 구덩이를 밟은 적이 있기 때문이다!
useReducer와 useState의 차이점은 다음과 같습니다.

state상태치의 구조가 비교적 복잡할 때useReducer를 사용하는 것이 유리하다.

useState에서 얻은 setState 방법으로 데이터를 업데이트할 때 비동기적입니다.useReducer를 사용하여 가져온 디스패치 방법으로 데이터를 업데이트하는 것은 동기화됩니다.

성능 최적화 Hooks(usemomo)

우리는class 형식의 구성 요소를 사용하는 데 생명주기shouldCompnentUpdate 함수가 있어 구성 요소의 성능을 최적화하고 매번 렌더링이 비싼 비용을 초래하는 것을 방지하는 것을 알고 있다.function 형식으로 구성 요소를 설명합니다. shouldCompnentUpdate (구성 요소가 업데이트되기 전에) 이 생명주기를 잃었습니다. 즉, 구성 요소 업데이트 전 조건을 통해 구성 요소가 업데이트되었는지 여부를 결정할 방법이 없습니다.그리고 함수 구성 요소에서 mount와 update 두 상태를 구분하지 않습니다. 이것은 함수 구성 요소의 매번 호출이 내부의 모든 논리를 실행하고 매우 큰 성능 손실을 가져온다는 것을 의미합니다.
usememo는 주로 React hooks를 사용하여 발생하는 쓸모없는 렌더링의 성능 문제를 해결하는 데 사용됩니다.
예:
A 구성 요소에는 두 개의 하위 구성 요소 B와 C가 있습니다. A 구성 요소에서 B에게 전달되는 props가 바뀌면 A 구성 요소의 상태가 바뀌고 다시 렌더링됩니다.B와 C도 다시 렌더링됩니다.사실 이런 상황은 비교적 자원을 낭비하는 것이다. 지금 우리는usememo를 사용하여 최적화를 할 수 있다. B 구성 요소가 사용하는props가 변화할 때 B만 바뀌고 C는 다시 렌더링하지 않는다.
Example:

// A  

import React from 'react';

export default ({ text }) => {
  console.log('component A：', 'render');
  return 
 A  ：{ text }
}

// B  

import React from 'react';

export default ({ text }) => {
  console.log('component B：', 'render');
  return 
 B  ：{ text }
}

// App  

import React, { useState, useMemo } from 'react';
import A from './ExampleA';
import B from './ExampleB';

export default () => {
  const [a, setA] = useState('A');
  const [b, setB] = useState('B');

  const exampleA = useMemo(() => , [a]);
  const exampleB = useMemo(() => , [b]);

  return (
    

      { exampleA }
      { exampleB }
        

         setA('A ') }>  A  
            
         setB('B ') }>  B  
    
  )
}

우리가 다른 단추를 누르면 컨트롤러는 출력 하나만 출력하고 a나 b, A와 B 구성 요소는 하나만 다시 렌더링합니다.
사실React에는 DOM 요소를 얻고 변수를 저장하는 useRef, 함수식 구성 요소의 성능을 최적화하는 useCallback 등 자주 사용하는 Hooks가 많이 있습니다. 이런 Hooks에 대해react 홈페이지에 가서 알아볼 수 있습니다. 여러분도 잘 알 수 있을 거라고 믿습니다. 여기는 더 이상 연구하지 않겠습니다.
React Hooks Api

결어

이 글은 우리web-study 창고에서 나온 것입니다. 마음에 드시면 스타에게 환영합니다!
주소: web-study