React에서 사용자 지정 후크 작성

후크는 기능 구성 요소에 상태 및 수명 주기를 추가하는 비교적 새로운 방법(React v16.8.x 이상)입니다. 후크 이전에는 클래스를 사용하여 동일한 기능을 가져야 했습니다. 그러나 Javascript에서 클래스를 사용하는 데는 고유한 문제가 있습니다.

일부 새로운 개발자는 OO 배경이 없을 수 있습니다.

this는 또 뭐죠?

비공개 대 공개 대 정적???

기능 공유가 더 복잡함

어쨌든 변환기가 클래스를 일반 함수로 변환함

많은 개발자가 클래스가 아닌 기능적 구성 요소로 구성 요소를 작성하는 것을 선호한다는 사실을 알게 되었습니다. 그런 다음 상태가 필요하면 클래스로 변환합니다. 글쎄, 당신은 더 이상 그렇게 할 필요가 없습니다.

내가 가장 일반적으로 사용하는 후크

내가 가장 자주 사용하는 내장 후크는 다음과 같습니다.

사용 상태

useReducer

사용효과

useState

useState는 구성 요소의 상태 속성을 만드는 데 사용됩니다. 클래스 구성 요소의 this.state와 매우 유사합니다.

class TodoComponent extends React.Component {
  state = {
    content: ''
  }
  ...
}
// OR
class TodoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ''
    }
  }
  ...
}

// and what we like
function TodoComponent() {
  const [content, setContent] = React.useState('');
  ...
}

위 기능 컴포넌트의 변수setContent는 상태 업데이트 기능입니다. this.setState 처럼 작동하고 content 상태를 업데이트하고 구성 요소를 다시 렌더링합니다.

React.useState는 항상 두 개의 항목이 있는 배열을 반환합니다. 첫 번째 항목은 state 변수이고 두 번째 항목은 updater 함수입니다. 업데이터 기능의 이름을 set<Name of state var> 로 지정하는 것이 좋습니다. 이렇게 하면 프로젝트에서 일관성이 유지됩니다.

useReducer

useReducer는 좀 더 강력한 useState와 비슷합니다. useReducer를 사용하는 이유는 무엇입니까?

구성 요소에 많은 상태 소품이 있습니다

.

Redux의 리듀서가 정말 마음에 드셨군요

구성 요소에 하나 또는 두 개 이상의 상태 속성이 있는 경우 useReducer 보다 useState 를 사용하여 이러한 소품을 만드는 것이 좋습니다. 여러 개별 상태 업데이터 기능을 보유하는 것보다 구성 요소 상태를 업데이트할 유형 및 페이로드를 사용하는 단일dispatch 기능을 관리하는 것이 더 쉬울 수 있습니다.

const initialState = {
  name: '',
  address: '',
  city: '',
};

// Just like in Redux
function userReducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return {
        ...state,
        name: action.payload,
      };
    case 'SET_ADDRESS':
      return {
        ...state,
        address: action.payload,
      };
    case 'SET_CITY':
      return {
        ...state,
        city: action.payload,
      };
  }
}

function UserComponent() {
  const [state, dispatch] = React.useReducer(userReducer, initialState);

  return (
    <div>
      <h1>{state.name}</h1>
      ...
    </div>
  );
}

useEffect

useEffect는 상태 또는 속성 업데이트를 기반으로 구성 요소의 다시 렌더링을 처리합니다. 또한 API에서 데이터를 가져오는 것과 같은 부작용을 처리하는 데 사용합니다.

function UserComponent() {
  const [userId, setUserId] = React.useState();
  React.useEffect(() => {
    async function fetchToken() {
      try {
        const response = await axios({
          method: 'GET',
          url: `${API_PATH}/user/${userId}`,
          withCredentials: true,
        });
        setToken(get(response, 'data.trustedTicket'));
      } catch (error) {
        console.error(error);
      }
    }

    fetchToken();
  }, [userId]); // Run the useEffect code when `userId` changes

  return (
    ...
  )
}

커스텀 후크

이제 몇 가지 매우 일반적인 후크에 대해 더 많이 이해했으므로 고유한 사용자 지정 후크를 만들어 보겠습니다. 먼저 후크의 이름을 지정해야 합니다.

function useTodos() {}

use 단어로 모든 연결을 시작하십시오. 이것은 당신 자신의 이익을 위한 것입니다. React 팀에는 후크를 망치지 않도록 하는 데 매우 유용한 ESLint 플러그인이 있습니다.

We provide an ESLint plugin that enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook.

후크를 정의했으므로 이제 일부 상태와 기능을 추가할 수 있습니다.

let nextTodoId = 0;
function useTodos(initialTodos = {}) {
  const [todos, setTodos] = React.useState(initialTodos);

  const addTodo = content => {
    const id = ++nextTodoId;
    setTodos({
      ...todos,
      [id]: {
        content,
        completed: false,
        id,
      },
    });
  };
  const toggleTodo = id => {
    setTodos({
      ...todos,
      [id]: {
        content: todos[id].content,
        completed: !todos[id].completed,
        id,
      },
    });
  };
  return [todos, addTodo, toggleTodo];
}

사용자 지정 후크는 다른 함수와 마찬가지로 매개 변수를 사용할 수 있습니다. 여기에서는 정의되지 않은 경우 기본적으로 빈 개체가 되는 initialTodos 개체를 전달합니다.
addTodo 상태 속성을 모두 업데이트하는 두 개의 업데이터 함수toggleTodo 및 todos를 추가했습니다.
useState 및 useReducer 후크와 마찬가지로 값 배열을 반환합니다.

...
  return [todos, addTodo, toggleTodo];

사용자 지정 후크 사용

다른 후크와 마찬가지로 사용자 정의useTodos 후크를 사용합니다.

function MyComponent() {
  const [todos, addTodo, toggleTodo] = useTodos();

  return (
    <>
    <AddTodo addTodo={addTodo}>
    <TodoList toggleTodo={toggleTodo} allTodos={todos}>
    </>
  )

}

useTodos 후크 값을 및 구성 요소에 전달합니다. 예를 들어 addTodo가 호출되면 addTodo 내에서 상태 업데이트 함수를 호출하기 때문에 다시 렌더링됩니다. todos 개체가 업데이트되었으며 이는 구성 요소를 다시 렌더링해야 함을 의미합니다.

글쎄, 당신이 갈고리에 빠지면 이것이 당신에게 도움이 되었기를 바랍니다. 위 코드에 대해 궁금한 점이 있으면 알려주세요. 즐거운 코딩 되세요 😊