S04L06 - Props, useEffect 및 Async, 앨범 쇼 페이지

html

React 마스터하기: Props, useEffect, 그리고 Albums Show 페이지에서 비동기 작업

목차

소개 ........................................................... 1
React Props 이해하기 ..................................... 3

Props란 무엇인가? ................................................. 3
컴포넌트에 Props 전달하기 ................................... 4


useState로 상태 관리하기 ....................................... 6
useEffect를 활용한 부수 효과 처리 ........................... 8

useEffect의 기본 ......................................... 8
일반적인 useEffect 패턴 .................................... 9


비동기 작업 구현하기 ......................... 11

네트워크 호출하기 ............................................ 11
비동기 데이터 처리하기 .................................... 13


Albums Show 페이지 구축하기 .................................... 15

사진 그리드 설정하기 ........................................ 15
동적 콘텐츠를 위한 API 통합 ........................ 17
비동기 로딩으로 사용자 경험 향상하기 . 19


결론 .............................................................. 21
추가 자료 ................................................... 23
SEO 최적화 키워드 ............................................ 25


소개
React 마스터하기: Props, useEffect, 그리고 Albums Show 페이지에서 비동기 작업에 오신 것을 환영합니다. 이 전자책은 React에 대한 기본 지식을 가진 초보자와 개발자를 위해 제작되었으며, 필수 React 개념인 props, useState, useEffect의 이해를 심화시키고, 동적인 Albums Show 페이지를 구축하는 데 있어 그 실용적인 응용 방법을 다룹니다.
오늘날의 급변하는 웹 개발 환경에서 반응적이고 인터랙티브한 사용자 인터페이스를 만드는 것은 매우 중요합니다. 강력한 JavaScript 라이브러리인 React는 이러한 인터페이스를 효율적으로 구축하는 데 필요한 도구를 제공합니다. 이 가이드는 React의 핵심 개념을 깊이 있게 탐구하며, 데이터 흐름, 상태, 부수 효과를 관리하여 매끄러운 사용자 경험을 창출하는 방법을 설명합니다.
왜 React인가?
React는 재사용 가능한 UI 컴포넌트를 구축할 수 있는 컴포넌트 기반 아키텍처로 유명합니다. 상태 관리와 수명 주기 메서드는 실시간 데이터와 사용자 상호 작용을 우아하게 처리할 수 있는 동적 애플리케이션을 생성할 수 있게 합니다.
주요 내용

Props: 컴포넌트 간에 데이터를 전달하는 방법을 이해합니다.
useState: 컴포넌트 상태를 효과적으로 관리합니다.
useEffect: 데이터 가져오기 및 구독과 같은 부수 효과를 처리합니다.
비동기 작업: 사용자 경험을 방해하지 않고 데이터를 로드하기 위한 네트워크 호출을 구현합니다.

이 전자책을 마치면 이러한 React 개념을 종합적으로 이해하고, 비동기 데이터 로딩을 통해 Albums Show 페이지를 구축하는 데 적용할 수 있게 될 것입니다.

React Props 이해하기
2.1. Props란 무엇인가?
React에서 props는 읽기 전용 속성으로, 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 데 사용됩니다. Props는 컴포넌트 트리를 따라 데이터를 흐르게 하며, 부모 컴포넌트가 자식 컴포넌트와 통신할 수 있게 합니다.
Props의 주요 특성:

읽기 전용: Props는 수신 컴포넌트에서 수정할 수 없습니다.
불변성: 단방향 데이터 흐름을 보장하여 예측 가능한 컴포넌트 동작을 촉진합니다.
재사용 가능: Props로 컴포넌트를 매개변수화함으로써 다용도적이고 재사용 가능한 UI 요소를 만들 수 있습니다.

2.2. 컴포넌트에 Props 전달하기
Props를 전달하려면 부모 컴포넌트 내에서 자식 컴포넌트를 렌더링할 때 속성을 지정합니다. 자식 컴포넌트는 props 객체를 통해 이러한 props에 접근할 수 있습니다.
예시:




		
		
			
			
Java
			
			// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const photoURLs = [
    { id: 1, url: 'photo1.jpg', title: 'Sunset' },
    { id: 2, url: 'photo2.jpg', title: 'Mountain' },
    // Additional photos...
  ];

  return (
    <div>
      <ChildComponent photos={photoURLs} />
    </div>
  );
};

export default ParentComponent;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const photoURLs = [
    { id: 1, url: 'photo1.jpg', title: 'Sunset' },
    { id: 2, url: 'photo2.jpg', title: 'Mountain' },
    // Additional photos...
  ];
 
  return (
    <div>
      <ChildComponent photos={photoURLs} />
    </div>
  );
};
 
export default ParentComponent;
 
					
				
			
		





		
		
			
			
Java
			
			// ChildComponent.jsx
import React from 'react';

const ChildComponent = ({ photos }) => {
  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>
          <img src={photo.url} alt={photo.title} />
          <p>{photo.title}</p>
        </div>
      ))}
    </div>
  );
};

export default ChildComponent;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						// ChildComponent.jsx
import React from 'react';
 
const ChildComponent = ({ photos }) => {
  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>
          <img src={photo.url} alt={photo.title} />
          <p>{photo.title}</p>
        </div>
      ))}
    </div>
  );
};
 
export default ChildComponent;
 
					
				
			
		


이 예시에서:

ParentComponent는 photoURLs 배열을 photos prop을 통해 ChildComponent에 전달합니다.
ChildComponent는 photos prop을 수신하고 이를 반복하여 각 사진을 표시합니다.


useState로 상태 관리하기
React의 useState 훅은 함수형 컴포넌트에 상태를 추가할 수 있게 해줍니다. 상태는 시간이 지남에 따라 변할 수 있는 동적 데이터를 나타내며, 컴포넌트의 렌더링과 동작에 영향을 미칩니다.
상태 선언하기
상태 변수를 선언하려면 useState 훅을 사용하며, 이는 현재 상태 값과 이를 업데이트하는 함수를 반환합니다.
구문:




		
		
			
			
Java
			
			const [state, setState] = useState(initialState);
			
				
					
				
					1
				
						const [state, setState] = useState(initialState);
					
				
			
		


예시:




		
		
			
			
Java
			
			import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // count를 0으로 초기화

  const increment = () => {
    setCount(count + 1); // 상태 업데이트
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
};

export default Counter;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						import React, { useState } from 'react';
 
const Counter = () => {
  const [count, setCount] = useState(0); // count를 0으로 초기화
 
  const increment = () => {
    setCount(count + 1); // 상태 업데이트
  };
 
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
};
 
export default Counter;
 
					
				
			
		


이 예시에서:

count는 0으로 초기화된 상태 변수입니다.
setCount는 count를 업데이트하는 함수입니다.
"증가" 버튼을 클릭하면 count가 업데이트되어 새로운 값이 반영되도록 재렌더링이 트리거됩니다.

복잡한 상태 관리하기
더 복잡한 상태 객체나 배열을 관리할 때는 예측 가능한 상태 전환을 유지하기 위해 업데이트를 불변적으로 수행해야 합니다.
배열을 사용하는 예시:




		
		
			
			
Java
			
			const [photos, setPhotos] = useState([]);

const addPhoto = (newPhoto) => {
  setPhotos((prevPhotos) => [...prevPhotos, newPhoto]);
};
			
				
					
				
					1
2
3
4
5
				
						const [photos, setPhotos] = useState([]);
 
const addPhoto = (newPhoto) => {
  setPhotos((prevPhotos) => [...prevPhotos, newPhoto]);
};
					
				
			
		


여기서 addPhoto는 기존의 photos 배열을 직접 변경하지 않고 새로운 사진을 추가합니다.

useEffect를 활용한 부수 효과 처리
useEffect 훅은 함수형 컴포넌트에서 데이터 가져오기, 구독, 또는 DOM을 수동으로 변경하는 등의 부수 효과를 수행할 수 있게 해줍니다.
4.1. useEffect의 기본
useEffect는 두 개의 인수를 받습니다:

Effect 함수: 부수 효과 로직을 포함하는 함수.
의존성 배열 (선택 사항): 효과가 재실행되어야 하는 시점을 결정하는 의존성 목록.

구문:




		
		
			
			
Java
			
			useEffect(() => {
  // 부수 효과 로직

  return () => {
    // 정리 함수 (선택 사항)
  };
}, [dependencies]);
			
				
					
				
					1
2
3
4
5
6
7
				
						useEffect(() => {
  // 부수 효과 로직
 
  return () => {
    // 정리 함수 (선택 사항)
  };
}, [dependencies]);
					
				
			
		


예시:




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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 언마운트 시 정리
    return () => clearInterval(interval);
  }, []); // 빈 의존성 배열은 마운트 시에만 실행되도록 함

  return <p>경과 시간: {seconds}초</p>;
};

export default Timer;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						import React, { useState, useEffect } from 'react';
 
const Timer = () => {
  const [seconds, setSeconds] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
 
    // 언마운트 시 정리
    return () => clearInterval(interval);
  }, []); // 빈 의존성 배열은 마운트 시에만 실행되도록 함
 
  return <p>경과 시간: {seconds}초</p>;
};
 
export default Timer;
 
					
				
			
		


이 예시에서:

useEffect는 seconds를 매초 증가시키는 타이머를 설정합니다.
정리 함수는 컴포넌트가 언마운트될 때 인터벌을 정리합니다.
빈 의존성 배열([])은 이 효과가 컴포넌트가 마운트될 때 한 번만 실행되도록 보장합니다.

4.2. 일반적인 useEffect 패턴

마운트 시 데이터 가져오기: 컴포넌트가 마운트될 때 데이터를 가져옵니다.
이벤트 구독: 창 크기 조절이나 키 입력과 같은 이벤트를 청취합니다.
문서 제목 업데이트: 상태에 따라 브라우저 탭의 제목을 변경합니다.

데이터 가져오기 예시:




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

const DataFetcher = () => {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch('/api/albums');
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error('앨범 가져오기 오류:', error);
      }
    };

    fetchAlbums();
  }, []); // 마운트 시 한 번만 가져오기

  return (
    <div>
      {albums.map((album) => (
        <div key={album.id}>{album.title}</div>
      ))}
    </div>
  );
};

export default DataFetcher;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
				
						import React, { useState, useEffect } from 'react';
 
const DataFetcher = () => {
  const [albums, setAlbums] = useState([]);
 
  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch('/api/albums');
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error('앨범 가져오기 오류:', error);
      }
    };
 
    fetchAlbums();
  }, []); // 마운트 시 한 번만 가져오기
 
  return (
    <div>
      {albums.map((album) => (
        <div key={album.id}>{album.title}</div>
      ))}
    </div>
  );
};
 
export default DataFetcher;
 
					
				
			
		


여기서 useEffect는 컴포넌트가 마운트될 때 API에서 앨범 데이터를 가져오고 albums 상태를 업데이트합니다.

비동기 작업 구현하기
API에서 데이터를 가져오는 것과 같은 비동기 작업은 현대 웹 애플리케이션의 필수적인 부분입니다. 이러한 작업을 효과적으로 관리하면 반응적이고 효율적인 사용자 경험을 보장할 수 있습니다.
5.1. 네트워크 호출하기
네트워크 호출은 외부 소스에서 데이터를 가져와 애플리케이션의 동적 콘텐츠를 가능하게 합니다.
Fetch API 예시:




		
		
			
			
Java
			
			const fetchPhotos = async () => {
  try {
    const response = await fetch('https://api.example.com/photos');
    const photos = await response.json();
    setPhotos(photos);
  } catch (error) {
    console.error('사진 가져오기 실패:', error);
  }
};
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const fetchPhotos = async () => {
  try {
    const response = await fetch('https://api.example.com/photos');
    const photos = await response.json();
    setPhotos(photos);
  } catch (error) {
    console.error('사진 가져오기 실패:', error);
  }
};
					
				
			
		


5.2. 비동기 데이터 처리하기
비동기 데이터를 관리하려면 데이터를 가져온 후 상태를 업데이트하고 로딩 상태와 잠재적인 오류를 처리해야 합니다.
향상된 데이터 가져오기 예시:




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

const PhotoGallery = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadPhotos = async () => {
      try {
        const response = await fetch('/api/photos');
        if (!response.ok) {
          throw new Error('네트워크 응답이 올바르지 않습니다');
        }
        const photosData = await response.json();
        setPhotos(photosData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    loadPhotos();
  }, []);

  if (loading) return <p>사진 로딩 중...</p>;
  if (error) return <p>오류: {error}</p>;

  return (
    <div>
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} />
      ))}
    </div>
  );
};

export default PhotoGallery;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
				
						import React, { useState, useEffect } from 'react';
 
const PhotoGallery = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const loadPhotos = async () => {
      try {
        const response = await fetch('/api/photos');
        if (!response.ok) {
          throw new Error('네트워크 응답이 올바르지 않습니다');
        }
        const photosData = await response.json();
        setPhotos(photosData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
 
    loadPhotos();
  }, []);
 
  if (loading) return <p>사진 로딩 중...</p>;
  if (error) return <p>오류: {error}</p>;
 
  return (
    <div>
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} />
      ))}
    </div>
  );
};
 
export default PhotoGallery;
 
					
				
			
		


이 예시에서:

로딩 상태: 데이터 가져오기가 진행 중임을 나타냅니다.
오류 처리: 가져오기 중 발생한 오류를 포착하고 표시합니다.
데이터 렌더링: 데이터가 성공적으로 가져와지면 사진을 표시합니다.


Albums Show 페이지 구축하기
props, useState, useEffect, 그리고 비동기 작업을 결합하여 효율적으로 사진 앨범을 로드하고 표시하는 동적인 Albums Show 페이지를 만들 수 있습니다.
6.1. 사진 그리드 설정하기
Photo Grid 컴포넌트는 구조화된 그리드 레이아웃으로 사진을 표시하는 역할을 합니다. props를 활용하여 표시할 사진 목록을 수신합니다.
PhotoGrid.jsx




		
		
			
			
Java
			
			import React from 'react';
import { Grid, Card, CardMedia, CardContent, Typography } from '@material-ui/core';

const PhotoGrid = ({ photoURLs }) => {
  return (
    <Grid container spacing={2}>
      {photoURLs.map((photo) => (
        <Grid item xs={12} sm={6} md={4} lg={3} key={photo.id}>
          <Card>
            <CardMedia
              component="img"
              alt={photo.title}
              height="140"
              image={photo.url}
              title={photo.title}
            />
            <CardContent>
              <Typography variant="h6">{photo.title}</Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

export default PhotoGrid;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						import React from 'react';
import { Grid, Card, CardMedia, CardContent, Typography } from '@material-ui/core';
 
const PhotoGrid = ({ photoURLs }) => {
  return (
    <Grid container spacing={2}>
      {photoURLs.map((photo) => (
        <Grid item xs={12} sm={6} md={4} lg={3} key={photo.id}>
          <Card>
            <CardMedia
              component="img"
              alt={photo.title}
              height="140"
              image={photo.url}
              title={photo.title}
            />
            <CardContent>
              <Typography variant="h6">{photo.title}</Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};
 
export default PhotoGrid;
 
					
				
			
		


설명:

Material-UI Grid: 반응형 그리드 레이아웃을 만듭니다.
Card 컴포넌트: 각 사진과 제목을 표시합니다.
Props 사용: photoURLs을 prop으로 받아 동적으로 사진을 렌더링합니다.

6.2. 동적 콘텐츠를 위한 API 통합
Albums Show 페이지를 실제 데이터로 채우기 위해, API 엔드포인트를 통합하여 앨범과 사진 정보를 가져옵니다.
AlbumShow.jsx




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';

const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAlbumPhotos = async () => {
      try {
        // 앨범 목록 가져오기
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();

        // ID가 2인 앨범 선택
        const album = albums.find((alb) => alb.id === 2);

        // 선택된 앨범의 사진 가져오기
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();

        setPhotoURLs(photos);
      } catch (err) {
        setError('앨범 사진을 로드하지 못했습니다.');
      } finally {
        setLoading(false);
      }
    };

    fetchAlbumPhotos();
  }, []);

  if (loading) return <p>앨범 로딩 중...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <h1>{`앨범: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
    </div>
  );
};

export default AlbumShow;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
				
						import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';
 
const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchAlbumPhotos = async () => {
      try {
        // 앨범 목록 가져오기
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
 
        // ID가 2인 앨범 선택
        const album = albums.find((alb) => alb.id === 2);
 
        // 선택된 앨범의 사진 가져오기
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();
 
        setPhotoURLs(photos);
      } catch (err) {
        setError('앨범 사진을 로드하지 못했습니다.');
      } finally {
        setLoading(false);
      }
    };
 
    fetchAlbumPhotos();
  }, []);
 
  if (loading) return <p>앨범 로딩 중...</p>;
  if (error) return <p>{error}</p>;
 
  return (
    <div>
      <h1>{`앨범: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
    </div>
  );
};
 
export default AlbumShow;
 
					
				
			
		


설명:

앨범 가져오기: 백엔드에서 앨범 목록을 가져옵니다.
앨범 선택: 특정 앨범(예: ID 2)을 선택하여 표시합니다.
사진 가져오기: 선택된 앨범과 관련된 사진을 가져옵니다.
상태 관리: photoURLs, loading, error 상태를 적절히 업데이트합니다.

6.3. 비동기 로딩으로 사용자 경험 향상하기
특히 많은 수의 사진을 다룰 때, 원활한 사용자 경험을 보장하기 위해 비동기 로딩을 구현합니다. 이 접근 방식은 데이터를 점진적으로 로드하여 데이터 가져오는 동안 UI가 멈추는 것을 방지합니다.
비동기 로딩이 적용된 수정된 AlbumShow.jsx




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';

const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadPhotosAsync = async () => {
      try {
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
        const album = albums.find((alb) => alb.id === 2);
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();

        // 지연을 사용하여 비동기 로딩 시뮬레이션
        for (const photo of photos) {
          await new Promise((resolve) => setTimeout(resolve, 1000)); // 1초 지연
          setPhotoURLs((prevPhotos) => [...prevPhotos, photo]);
        }
      } catch (err) {
        setError('앨범 사진을 로드하지 못했습니다.');
      } finally {
        setLoading(false);
      }
    };

    loadPhotosAsync();
  }, []);

  if (loading && photoURLs.length === 0) return <p>앨범 로딩 중...</p>;

  return (
    <div>
      <h1>{`앨범: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
      {loading && <p>더 많은 사진 로딩 중...</p>}
      {error && <p>{error}</p>}
    </div>
  );
};

export default AlbumShow;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
				
						import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';
 
const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const loadPhotosAsync = async () => {
      try {
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
        const album = albums.find((alb) => alb.id === 2);
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();
 
        // 지연을 사용하여 비동기 로딩 시뮬레이션
        for (const photo of photos) {
          await new Promise((resolve) => setTimeout(resolve, 1000)); // 1초 지연
          setPhotoURLs((prevPhotos) => [...prevPhotos, photo]);
        }
      } catch (err) {
        setError('앨범 사진을 로드하지 못했습니다.');
      } finally {
        setLoading(false);
      }
    };
 
    loadPhotosAsync();
  }, []);
 
  if (loading && photoURLs.length === 0) return <p>앨범 로딩 중...</p>;
 
  return (
    <div>
      <h1>{`앨범: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
      {loading && <p>더 많은 사진 로딩 중...</p>}
      {error && <p>{error}</p>}
    </div>
  );
};
 
export default AlbumShow;
 
					
				
			
		


설명:

점진적 로딩: 루프를 사용하여 지연과 함께 하나씩 사진을 추가하여 네트워크 지연을 시뮬레이션합니다.
사용자 피드백: 데이터 가져오는 동안 진행 중인 상태를 사용자에게 알립니다.
반응형 UI: 모든 네트워크 호출이 완료되기를 기다리지 않고 점진적으로 사진을 로드하여 사용자 경험을 향상시킵니다.


결론
이 전자책에서는 React의 핵심 개념인 props, useState, useEffect 및 비동기 작업의 실용적인 응용을 통해 동적인 Albums Show 페이지를 구축하는 방법을 살펴보았습니다. 데이터 흐름, 상태, 부수 효과를 효과적으로 관리함으로써 반응적이고 인터랙티브한 사용자 인터페이스를 만들어 전체적인 사용자 경험을 향상시킬 수 있습니다.
주요 내용

Props는 컴포넌트 간의 원활한 데이터 공유를 가능하게 하여 재사용 가능하고 유지보수 가능한 코드를 촉진합니다.
useState는 함수형 컴포넌트 내에서 동적 데이터를 관리하는 간단한 방법을 제공합니다.
useEffect는 데이터 가져오기 및 구독과 같은 부수 효과를 처리하여 컴포넌트가 변화에 적절하게 반응하도록 합니다.
비동기 작업은 애플리케이션의 반응성을 저해하지 않고 데이터를 로드하는 데 필수적입니다.

다음 단계

상태 관리 심화: Redux나 Context API와 같은 더 고급 상태 관리 솔루션을 탐구합니다.
고급 useEffect 패턴: 의존성, 정리 함수, useEffect의 성능 최적화에 대해 배웁니다.
오류 처리 및 사용자 피드백: 보다 견고한 오류 처리와 사용자 피드백 메커니즘을 구현합니다.
성능 최적화: 렌더링 최적화 기술과 React 애플리케이션의 성능 향상 방법을 조사합니다.

이러한 개념을 마스터함으로써 더 복잡한 React 프로젝트를 처리하고 정교한 웹 애플리케이션을 구축할 준비가 될 것입니다.

추가 자료

React 공식 문서
React Hooks 이해하기
Material-UI 문서
JavaScript Async/Await
React에서 상태 관리


SEO 최적화 키워드
React Props, useEffect, useState, Asynchronous Operations, Albums Show Page, React Hooks, Photo Grid, Data Fetching in React, React State Management, Material-UI Grid, React Functional Components, React Lifecycle Methods, Asynchronous Data Loading, React Component Communication, React Tutorial for Beginners, Building Photo Galleries in React, Responsive Design with Material-UI, React API Integration, Handling Side Effects in React, React Best Practices
참고: 이 기사는 AI가 생성했습니다.