Multiple Returns

Jaeseok Han·2023년 10월 20일

Multiple Returns React conditional rendering

React Basic

목록 보기

14/30

Basic

바닐라 자바스크립트에서는 조건문을 통해서 리턴되는 값을 나누어준다.

const sayHello = (name) => {
  if (name) {
    return `Hello, ${name}`;
    // exit the function, skip rest of the code
  }
  // so if name provided, won't get to this line
  return 'Hello, there';
};

const firstResp = sayHello('john');
console.log(firstResp); // Hello, john
const secondResp = sayHello();
console.log(secondResp); // Hello, there

만약 어떤 함수에서 명시적인 반환문이 없다면, 그 함수는 기본적으로 'undefined'를 반환한다.

리액트에서는 주로 로딩을 기준으로 렌더링을 다르게 해준다(다른 상태값으로도 렌더링 기준을 잡을 수 있음)

const MultipleReturnsBasics = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      //done fetching data
      setIsLoading(false)
    },3000)
  }, [])

  if(isLoading){
    return <h2>Loading...</h2>;
  }else{
    return <h2>Multiple Returns Basics</h2>;
  }
  
};
export default MultipleReturnsBasics;

3초 뒤에 isLoading 상태값이 변하면서 다른 렌더링이 된다.
주로 서버에 데이터를 요청하고 값을 가져와 렌더링하기 직전까지 로딩중을 표시해주고 완료되면 데이터를 표출하도록 렌더링 시켜준다.

Fetch Data

Setup Challenge

상태 변수를 생성
- user 기본값은 null로 설정
주어진URL에서 데이터를 가져옴(현재 결과를 콘솔에 로깅한다)
콘솔에서 사용자 객체(user)를 확인할 수 있다면 계속 진행
이 과제를 완료하면 주어진 URL에서 데이터를 가져와서 user 상태 값을 설정하게 된다. 그런 다음, 데이터가 성공적으로 가져와진 경우 튜토리얼을 계속하여 사용자 객체를 활용할 수 있다.

import { useEffect, useState } from 'react';
const url = 'https://api.github.com/users/Jaeseokkong';

const MultipleReturnsFetchData = () => {
  return <h2>Fetch Data </h2>;
};
export default MultipleReturnsFetchData;

학습

import { useEffect, useState } from 'react';
const url = 'https://api.github.com/users/Jaeseokkong';

const MultipleReturnsFetchData = () => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(url);
        const user = await response.json();
        console.log(user);
      } catch(error) {
        console.log(error);
      }
    }

    fetchUser();
  }, [])

  return <h2>Fetch Data </h2>;
};
export default MultipleReturnsFetchData;

user 상태값을 선언하고 useEffect 렌더링 초기에 데이터를 가져와서 fetch를 통해 url로 user정보를 요청하여 콘솔을 찍음

데이터 가져오기

일반적으로 세 가지 옵션을 고려한다.

로딩 (Loading): 데이터가 도착하기를 기다리는 상태 (로딩 상태를 표시)
오류 (Error): 오류가 발생한 상태 (오류 메시지를 표시)
성공 (Success): 데이터를 성공적으로 받은 상태 (데이터를 표시)

import { useEffect, useState } from 'react';
const url = 'https://api.github.com/users/Jaeseokkong';

const MultipleReturnsFetchData = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(url);
        const user = await response.json();
        setUser(user);
        console.log(user);
      } catch(error) {
        setIsError(true);
        console.log(error);
      }
      setIsLoading(false);
    };
    fetchUser();
  }, [])

  if(isLoading){
    return <h2>Loading...</h2>
  }
  if(isError){
    return <h2>There was an error...</h2>
  }
  return <div>
    <img style={{width : '150px', borderRadius: '25px'}} src={user.avatar_url} alt={user.name}/>
    <h2>{user.name}</h2>
    <p>{user.bio}</p>
  </div>;
};
export default MultipleReturnsFetchData;

로딩, 에러, 성공에 따른 상태값을 설정하고 그 조건에 맞춰 렌더링을 하게된다.

Fetch Erros

Gatcha

Axios와 같이, 기본적으로 fetch() API는 4xx 또는 5xx 범위의 HTTP 상태 코드를 오류로 간주하지 않는다. 이러한 상태 코드는 성공적인 요청으로 나타낸다.

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(url);
        if(!response.ok){
          setIsError(true);
          setIsLoading(false);
          return;
        }
        const user = await response.json();
        setUser(user);
        
      } catch(error) {
        setIsError(true);
        console.log(error);
      }
      setIsLoading(false);
    };
    fetchUser();
  }, [])

응답 상태값이 정상적으로 작동하지않은 경우 에러와 로딩처리를 한다.

💡 response.ok 는 HTTP 상태값이 200~299일때 true를 반환하고 그 외는 false르 반환

Order Matters - Setup

Challenge

user 를 구조분해 할당하여 사용

 const {avatar_url, name, bio} = user;

  return (
    <div>
      <img style={{width : '150px', borderRadius: '25px'}} src={avatar_url} alt={name}/>
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );

만약 user 구조 분해 할당을 상단(return 전)에서 배치할 경우 에러가 발생한다.

  const [user, setUser] = useState(null);
  const {avatar_url, name, bio} = user;

이유는 초기값이 null 이기 때문에 객체로 활용할 수 없음

Fetch Function Location

 const fetchUser = async () => {
    try {
      const response = await fetch(url);
      if(!response.ok){
        setIsError(true);
        setIsLoading(false);
        return;
      }
      const user = await response.json();
      setUser(user);

    } catch(error) {
      setIsError(true);
      console.log(error);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    fetchUser();
  }, [])