0723_API 호출/ HOOK/ export 기본 개념

HOOK

#HOOK을 이용하여 class를 작성할 필요없이 상태 값과 여러 React 기능을 사용할 수 있다!

# Hook를 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 조금 더 예측 가능하도록 하기 위해 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.

 

 

useState가 바로 Hook!

Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가한다.

이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.

이것은 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.

 

useState는 인자로 초기 state 값을 하나 받는다. 카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0을 넣어준 것이다. 

this.state와는 달리 setState Hook의 state는 객체일 필요가 없다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.

const [ count, setCount ] = useState(0); 

->  이 함수가 호출되고 나면 배열을 반환한다. 그 배열의 첫번째 원소는 상태 값(count)이고, 두번째 원소는 상태를 설정하는 함수(setCount)다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터(0)로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.

 

하나의 컴포넌트 안에서 여러 State HOOK을 사용할 수 있다.

{age} {fruit} {todos} 로 값을 사용함

배열 구조 분해(destructuring) 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다. 이 변수명은 useState API와 관련이 없다. React는 매번 렌더링할 때 useState가 사용된 순서대로 실행할 것이다.

*배열 구조 분해 문법 => 배열 비구조화 할당

 

 

#HOOK이란?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다.

 

#EFFECT HOOK

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 “side effects”(또는 짧게 “effects”)라고 한다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다.

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.

-> useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook!

React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.

 

ex) React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트

useEffect를 사용하면, React는 DOM을 바꾼 뒤에 “effect” 함수를 실행한다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있다. 기본적으로 React는 매 렌더링 이후에 effects를 실행한다. (첫 번째 렌더링도 포함)

#첫 렌더링 후(마운트 될 때)에만 작업을 하려면 함수의 두번째 파라미터로 비어있는 배열을 넣자!

컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타나고 그 이후에는 나타나지 않을 것이다.

#특정 값이 업데이트 될 때만 실행하려면?

useEffect 의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣자!

 

 

---

 

API 연동

import axios from 'axios';

 

useState 와 useEffect 로 데이터 로딩하기

useState 를 사용하여 요청 상태를 관리하고, useEffect 를 사용하여 컴포넌트가 렌더링되는 시점에 요청을 시작하자!

요청에 대한 상태를 관리 할 때에는 다음과 같이 총 3가지 상태를 관리해주어야한다.

1. 요청의 결과
2. 로딩 상태
3. 에러

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 요청이 시작 할 때에는 error 와 users 를 초기화하고
        setError(null);
        setUsers(null);
        // loading 상태를 true 로 바꿉니다.
        setLoading(true);
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/users'
        );
        setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return null;
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.username} ({user.name})
        </li>
      ))}
    </ul>
  );
}

export default Users;

 

• useEffect 에 첫번째 파라미터로 등록하는 함수에는 async 를 사용 할 수 없기 때문에 함수 내부에서 async 를 사용하는 새로운 함수를 선언해주어야 한다.
• 로딩 상태가 활성화 됐을 땐 로딩중.. 이라는 문구를 보여준다.
• users 값이 아직 없을 때에는 null 을 보여준다.
• 맨 마지막에서는 users 배열을 렌더링하는 작업을 해준다.

 

---

 

async await VS .than

 

• .then 은 데이터 불러온 후에 가공하지 않고 기다렸다가 렌더링만 하면 될때
• 데이터 불러온 후 가공이 필요할 때는 async await 써서 동기화하기

 

#async await

비동기 처리 패턴 -> 순서대로 처리하자!

 

만약 콜백으로 비동기 처리하면

async await 를 사용하면

 

*await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수이다.

 

유저 정보를 불러와서 유저 아이디가 1이면 Todo를 불러온다. 값이 오면 콘솔에 찍는다.

#예외 처리는 try catch로!

 

 

---

 

다른 파일에서 함수 불러서 쓸때

#named export

export

import

#default export

export

import

 

 

 

 

 

 

 

참고자료

 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

https://velog.io/@velopert/react-hooks#2-useeffect

리액트의 Hooks 완벽 정복하기

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export