16.8 버전 이후, React 갈고리가 도입됨에 따라, 우리는 React 응용 프로그램을 작성하는 방식을 바꾸었다.실제로 우리는 현재 기능 구성 요소 내에서React 기능, 예를 들어 상태와 부작용을 이용할 수 있다.
그러나 어떤 갈고리를 사용하는지, 그리고 갈고리를 어떻게 사용하는지 기억하는 것은 항상 쉽지 않다.
이것이 바로 내가 이 시각 메모지를 만들어서 너에게 반응 연결을 파악하게 한 이유다.실제로, 너는 이곳이 단지 기본적인 쪽지 메모서가 아니라는 것을 발견할 수 있을 것이다.사실상, 나는 모든 React 갈고리에 당신이 그것을 어떻게 사용하고 어디서 사용하는지 진정으로 이해할 수 있도록 진실한 예시를 제공했다.

자신의 던전을 원하십니까?🎁

PDF 버전right here을 다운로드하여 언제 어디서나 메모를 받을 수 있습니다.

카탈로그

State Hook - useState

Effect Hook - useEffect

Ref Hook - useRef

Callback Hook - useCallback

Context Hook - useContext

Memoization Hook - useMemo

Reducer Hook - useReducer

Custom Hook

상태 연결 - useState

import React, { useState } from 'react';

useState는 기능 구성 요소에 React 상태를 추가할 수 있는 갈고리입니다.

useState는 현재 상태를 되돌려주고 함수를 업데이트합니다.

useState는 초기 상태 값을 매개 변수로 사용합니다.

const MyComponent = (props) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Show</button>
      { show && <Modal /> }
    </div>
  );
};

useState는 여러 상태 변수에 사용할 수 있습니다.

const MyComponent = (props) => {
  const [name, setName] = useState("Greg");
  const [country, setCountry] = useState("France");

  return <div>Hello! I'm {name}, from {country}.</div>;
};

useState는 원어, 객체 또는 그룹을 저장할 수 있습니다.

const [people, setPeople] = useState({
  name: "Greg",
  country: "France"
});

상태 변수를 업데이트할 때useState는 병합이 아니라 항상 대체합니다.

상태 함수를 업데이트하면 함수를 받아들일 수 있습니다.이 함수는 이전의 상태 값을 수신하고 업데이트된 값을 되돌려줍니다.

const [people, setPeople] = useState({
  name: "Greg",
  country: "France",
  age: 28
});

...

setPeople(prevState => {
  return { ...prevState, age: prevState.age + 1 };
});

효과 연결 - useEffect

import React, { useEffect } from 'react';

useEffect는 함수 구성 요소에서 데이터 가져오기, 수동 DOM 작업 등 부작용을 수행할 수 있는 갈고리입니다...

useEffect는 함수를 매개변수로 받아들입니다.

렌더링할 때마다 useEffect가 실행됩니다.

const MyComponent = ({ userId }) => {
  const [user, setUser] = useState({});

  useEffect(() => {
    fetch(`http://api.example.com/v1/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  });

  return (
    <ul>
      { friends.map(friend => <li key={friend.id}>{friend.name}</li>) }
    </ul>
  );
};

useEffect는 두 번째 매개 변수인 종속 항목 그룹을 받아들입니다.이것은 React가 의존 항목 중 하나가 변경되었을 때만 effect 함수를 실행할 수 있음을 알려 줍니다.

한 번만 실행할 수 있도록 빈 그룹 ([]) 을 전달할 수 있습니다.

useEffect(() => {
  fetch(`http://api.example.com/v1/users/${userId}`)
    .then(res => res.json())
    .then(data => setUser(data));
}, [userId]);

useEffect를 사용하면 정리 함수를 반환하여 사용한 모든 효과를 정리할 수 있습니다.

useEffect(() => {
  window.addEventListener("mousedown", eventhandler);

  return () => {
    window.removeEventListener("mousedown", eventhandler);
  };
}, []);

Ref Hook-useRef

import React, { useRef } from 'react';

useRef를 사용하면 DOM 요소에 액세스할 수 있습니다.

const MyComponent = (props) => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  });

  return (
    <form>
      <input ref={inputRef} type="text" />
    </form>
  );
};

리셋 연결 - useCallback

import React, { useCallback } from 'react';

useCallback은 리셋된 메모리 버전을 반환합니다.

useCallback은 리셋과 의존 항목 그룹을 매개 변수로 받아들인다.

의존 항목 중 하나가 변경될 때만 리셋이 변경됩니다.

const MyComponent = ({ eventhandler }) => {
  ...
  const handleEventHandler = useCallback(
    event => {      
      if (typeof eventHandler === "function") {        
        eventHandler(event);      
      }    
    },    
    [eventHandler]
  );
  ...

컨텍스트 연결 - useContext

import React, { useContext } from 'react';

useContext를 사용하면 상하문을 읽고 기능 구성 요소에서 변경 사항을 구독할 수 있습니다.

React를 통해 컨텍스트를 작성해야 합니다.createContext는 상하문에서 프로그램 구성 요소를 제공합니다.

useContext는 React가 작성한 컨텍스트 자체를 매개 변수로 받아들입니다.컨텍스트를 작성합니다.

컨텍스트의 현재 컨텍스트 값을 반환합니다.

const UserContext = React.createContext(null);

function App() {
  const [userName, setUserName] = useState("Greg");

  return (
    <UserContext.Provider value={{ name: userName }}>
      <Main />
    </UserContext.Provider>
  );
}

const Main = (props) => (
  <>
    <Header />
    <UserInfo />
    <Footer />
  </>
);

const UserInfo = (props) => {
  const user = useContext(UserContext);

  return <div>Hello, {user.name}!</div>;
};

메모리 연결 - use Memo

import React, { useMemo } from 'react';

usemo는 비싼 계산된 기억값을 되돌려 성능을 최적화하는 데 도움을 준다.

usemo는 함수와 의존 항목 그룹을 매개 변수로 받아들인다.

의존항 중 하나가 변할 때만 usemomo는 기억값을 다시 계산합니다.

const MyComponent = ({ a, b }) => {
  const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]);
  ...
};

감속기 연결 - 사용자 Educer

import React, { useReducer } from 'react';

useReducer를 사용하면 프로그램 상태를 관리할 수 있습니다.이것은 상태 연결useState의 대체 방안입니다.

useReducer 수용 유형은 (state,action) = >newState의reducer를 매개 변수로 합니다.이것은 현재 상태와 스케줄링 방법을 되돌려줍니다.

const initialState = { isAuth: false, user: null };

function reducer(state, action) {
  switch (action.type) {
    case "login": return { isAuth: true, user: action.user };
    case "logout": return { isAuth: false, user: null };
    default: return state;
  } 
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleLogin = () => dispatch({ type: 'login', user: { ... } );

  const handleLogout = () => dispatch({ type: 'logout' );

  if (state.isAuth) {
    return (
      <>
        <p>Welcome, {state.user.name}!</p>
        <button onClick={handleLogout}>Logout</button>
      </>
    );
  }

  return <button onClick={handleLogin}>Login</button>;
}

사용자 정의 연결

구성 요소 논리를 재사용 가능한 함수에 추출하기 위한 React 연결을 만들 수 있습니다.

import { useEffect, useCallback } from "react";

// Custom React Hook
export default function useEventListener(name, handler, element) {  

  const handleEventHandler = useCallback(
    event => {      
      if (typeof handler === "function") {        
        handler(event);      
      }    
    },    
    [handler]  
  );

  useEffect(
    () => {      
      // Check if the element supports the addEventListener method
      const checked = element && element.addEventListener;      
      // Stop here if not supported      
      if (!checked) return;      
      // Add event listener      
      element.addEventListener(eventName, handleEventHandler);      
      // Remove event listener on cleanup      
      return () => {       
        element.removeEventListener(name, handleEventHandler);
      };    
    },    
    [name, element, handleEventHandler] 
  );
}

다음은 무엇입니까

React를 완전히 파악하려면 많은 개념을 배워야 한다.하지만 이 메모지 덕분에 현대React로 응용 프로그램을 작성하기 시작할 수 있습니다.
언제든지 이 메모장의 전체 PDF 버전right here을 다운로드하십시오.