[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <background.JSX>

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import axios from "axios";

const BackgroundWrapper = styled.div`
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  // 배경 위에 반투명한 검은색 (50% 투명도)를 얹는 그라디언트 효과
    url(${(props) => props.backgroundImage});
    // backgroundImage 값을 받아 동적으로 배경 이미지를 설정
    // props.backgroundImage가 "image.jpg"라면 background값은 url(image.jpg)로 설정된다
    // props는 읽기 전용 컴포넌트로, 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 매개체
  background-size: cover;
  background-position: center;
  @media (max-width: 768px) {
    background-size: contain;
  }
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
`;

function Background() {
  const [backgroundImage, setBackgroundImage] = useState(""); // 상태관리
  // backgroundImage : 현재 상태 값, 배경 URL을 저장할 상태 변수로 사용,  초기값으로 "" (빈 문자열)을 가짐
  // setBackgroundImage : 상태를 변경하는 함수, backgroundImage의 값을 변경하고 그 값을 기반으로 다시 렌더링
  // useState(""): 초기값 설정 (초기값은 빈 문자열 "")
  // useState를 호출하면 배열 형태의 값이 반환 [현재 배경 이미지 URL 상태를 저장, 배경 이미지 URL을 업데이트하고 화면을 다시 렌더링]
  useEffect(() => {
  // Side Effects(컴포넌트 렌더링 외적인 작업..)를 관리하기 위해 사용하는 훅
  // 언제 실행될지를 제어하는 매개변수
  // 배열에 값이나 상태를 지정하면 그 값이 변경될 때만 효과가 재실행된다
    const fetchBackgroundImage = async () => {
  // async : 비동기 작업 실행 (useEffect 내부에서 직접 비동기 작업을 처리할 수 없다)
  // 백그라운드 이미지를 불러오는 비동기 함수
      const UNSPLASH_ACCESS_KEY = "-사용자 고유 키-";
      // -사용자 고유 키-에는 개인이 부여받은 키를 입력
      // 가독성을 위한 정의
      // OpenAPI를 사용하기 위해 입력하는 인증 키
      try {
        const response = await axios.get(
          `https://api.unsplash.com/photos/random`,
          // Unsplash API에서 랜덤 이미지를 제공
          {
            headers: {
              Authorization: `Client-ID ${UNSPLASH_ACCESS_KEY}`,
              // 유저 키를 사용해 인증
            },
            params: { query: "nature", orientation: "landscape" },
            // 자연, 가로방향 이미지 요청
          }
        );
        setBackgroundImage(response.data.urls.regular);
        // 43행에서 반환된 객체
        // response.data : API에서 반환된 JSON 형식의 실제 데이터
        // 이미지 크기중 regular를 선택
      } catch (error) {
        console.error("Error fetching background image:", error);
        // 오류 처리 (콘솔)
      }
    };

    fetchBackgroundImage();
  }, []);

  return <BackgroundWrapper backgroundImage={backgroundImage || "default-image-url"} />;
  // default-image-url : 미리 정해놓은 기본 이미지 URL (오류 방지)
}

export default Background;

 

Axios란?
: Axios는 브라우저 및 Node.js 환경에서 HTTP 요청을 쉽게 수행할 수 있도록 도와주는 Promise 기반의 JavaScript 라이브러리이다

 

이 코드에서 사용하는 이유?

: Open API와 같은 RESTful API에 요청을 보내는 작업을 간결하고 쉽게 처리하고, 자동으로 서버로부터 받은 JSON 데이터를 JavaScript 객체로 변환한다 외에도 코드 가독성 등의 이유가 있다고 한다

또, Open API를 사용해 이미지를 가져오는 동안 사용자가 다른 요청을 보냈을 경우, Axios는 이전 요청을 쉽게 취소할 수 있다 배경화면은 무거운 데이터이기 때문에 Axios를 사용하는게 유용하다

 

만약 작업이 간단하다면 기본 fetch API를 사용해도 좋다

 

그럼 RESTful API란?

: 아키텍처 스타일을 준수하여 설계된 웹 API를 의미한다

이게 무슨 의미미냐면 ..

RESTful API는 클라이언트(앱, 웹사이트)와 서버가 서로 대화하는 방법 중 하나인데

클라이언트가 서버에게 요청하는 규칙이며, 더 쉽고 정리된 방식의 방법이다

 

RESTful API에 대해선 공부를 더 해서 포스팅 하겠다

 

렌더링이란?

: 웹 개발에서는 브라우저가 HTML, CSS, JavaScript를 해석하여 화면에 표시하거나, 변경된 내용을 다시 그리는 작업을 의미한다 즉, 화면 업데이트이다