ํฐ์คํ ๋ฆฌ ๋ทฐ
์นดํ ๊ณ ๋ฆฌ๋ณ ์ํ ์์ธํ์ด์ง์์ ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ๋ ค๊ณ ํ๋ค.
์ถํ์ ์ด๋ป๊ฒ ํ์ฉ๋ ์ง ๋ชจ๋ฅด๋, ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ๊น์ง์ ํธ๋ฌ๋ธ ์ํ ์ ์์ธํ ๊ธฐ๋กํ๊ณ ์ ํ๋ค.
์ด๋ฒ ๊ธ์๋ ์๋ชป๋ ๋ฐฉํฅ์ฑ์ผ๋ก ๊ตฌํํ์ ๋์ ๋ฌธ์ ์ ์ ๊ธฐ๋กํ์ผ๋ฉฐ ์ต์ข ๋ฐฉ๋ฒ์ 2ํธ์์ ํ์ธํ ์ ์๋ค.
[NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (2) - ๋์ ๋ผ์ฐํ ์๋ ๋ฐฉ์
ํ์ด์ง๋ค์ด์ (1)์์ ์๋ชป๋ searchParams์ ์ฌ์ฉ์ผ๋ก API ์๋ํฌ์ธํธ๊ฐ ์๋ ํ์ฌ ํ์ด์ง์ ์ ๊ทผํ๋ค. [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (1) - ๊ธฐ๋ฅ ํ์ ์นดํ ๊ณ ๋ฆฌ๋ณ ์ํ ์์ธํ์ด์ง์์ ํ์ด์ง๋ค์ด์ ์ ๊ตฌ
coco910.tistory.com
ํ์ด์ง๋ค์ด์ ์ด๋?
์ฝํ ์ธ ๋ฅผ ์ฌ๋ฌ ํ์ด์ง๋ก ๋๋์ด ๋ค์ ๋๋ ์ด์ ํ์ด์ง๋ก ์ด๋ํ๊ฑฐ๋ ํน์ ํ์ด์ง๋ก ์ด๋ํ ์ ์๋ ์์

ํ์ด์ง๋ค์ด์ ๋ฒํผ์ ๊ธฐ๋ฅ
TMDB API๋ ํ์ด์ง๋ณ๋ก ์๋ํฌ์ธํธ๋ฅผ ๋ค๋ฅด๊ฒ ์ฃผ์ด ์ํ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ค.
์) Now-playing API ์๋ํฌ์ธํธ : ‘https://api.themoviedb.org/3/movie/now_playing?language=ko&page=1®ion=KR’
๐ค์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ๋ก ์ด๋ฃจ์ด์ง ์๋ํฌ์ธํธ์ด๊ธฐ ๋๋ฌธ์ 'page ๊ฐ์ queryParams๋ก ์ค์ ํด์ผ ํ๋?' ํ๋ ์๊ฐ์ด ๋ค์๋ค.
๐๊ตฌํํ๊ณ ์ ํ๋ ํ์ด์ง๋ค์ด์ ๋ฒํผ์ ๊ธฐ๋ฅ
- ๊ธฐ๋ฅ 1 : Page = 1 ๊ธฐ๋ณธ๊ฐ
- ๊ธฐ๋ฅ 2 : ๋ฒํผ ํด๋ฆญ ๋ง๋ค -1 / +1
- ๊ธฐ๋ฅ 3 : ์ฒซ ํ์ด์ง : ‘์ด์ ’ ๋ฒํผ ๋นํ์ฑํ / ๋ง์ง๋ง ํ์ด์ง: ‘๋ค์’ ๋ฒํผ ๋นํ์ฑํ
๋์ ๋ฐฉ์์ ๋ฐ๋ฅธ ๊ตฌํ ๋ฐฉ๋ฒ
- ํ์ด์ง๋ค์ด์ ๋ฒํผ ํด๋ฆญ ์ ์๋ก์ด ์์ฒญ ํจ์ ์คํ
- ํจ์ ์๋ ๋ฐฉ์ : ‘page = 1’ ์ฟผ๋ฆฌํ๋ผ๋ฏธํฐ์ ๊ฐ์ ๋์ ์ผ๋ก ๋ณ๋ํ๊ธฐ
- page๋ฅผ state๋ก ์ฃผ์ด ๋ณ๋ ์ ๋ฆฌ๋ ๋๋ง?
- Link ํ๊ทธ๋ก ๋์ด ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ์ ๊ฐ์ +1 / -1 ํ์ฌ ์ด๋?
- Form ํ๊ทธ ๋ด๋ถ์ ๋์ด ๋ฒํผ ์จํด๋ฆญ ์ ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ์ ๊ฐ์ ์ฆ/๊ฐ์ ์ํค๋ submit ํจ์?
์ ์ค ์ด๋ ๋ฐฉ์์ด ์ ํฉํ ๊น?
์ด๋ ํ์ด์ง๋ค์ด์ ๋์ ๋ฐฉ์์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค.
1. useState๋ก page ๊ฐ์ ๊ด๋ฆฌํ๊ณ ๋ฆฌ๋ ๋๋ง (SPA ๋ฐฉ์)
- ๋ฐฉ๋ฒ
- page๋ฅผ useState๋ก ๊ด๋ฆฌํ๊ณ , setPage(page + 1) ๊ฐ์ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ
- useEffect๋ฅผ ์ฌ์ฉํด page๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค API ์์ฒญ
- ์ฅ์
- ๋น ๋ฅธ ๋ ๋๋ง (ํ์ด์ง ์ด๋ ์์ด UI ์ ๋ฐ์ดํธ)
- ๋ฐฑ ๋ฒํผ์ ๋๋ ์ ๋ ์ํ ์ ์ง ๊ฐ๋ฅ (์ถ๊ฐ์ ์ธ ์ํ ๊ด๋ฆฌ ํ์)
- ๋ณ๋์ URL ๋ณ๊ฒฝ ์์ด ๋ด๋ถ ์ํ๋ก ๊ด๋ฆฌ ๊ฐ๋ฅ
- ๋จ์
- URL์ page ์ ๋ณด๊ฐ ์์ด์ ๊ณต์ ๋ถ๊ฐ๋ฅ
- ์ฌ์ฉ์๊ฐ ์๋ก๊ณ ์นจํ๋ฉด page ๊ฐ์ด ์ด๊ธฐํ๋จ
- ์ธ์ ์ ํฉํ๊ฐ?
๐๐ป ์ฑ ๋ด๋ถ์์๋ง ๋์ํ๋ ํ์ด์ง๋ค์ด์ (์: ๋ฌดํ ์คํฌ๋กค, ๋ฆฌ์คํธ UI์์ ๊ฐ๋จํ ํ์ด์ง)
2. Link ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ queryParams ๋ณ๊ฒฝ (SSR/SEO ์ต์ ํ)
- ๋ฐฉ๋ฒ
- ?page=2์ ๊ฐ์ URL ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ useSearchParams ๋๋ window.location.search๋ก page ๊ฐ์ ๊ฐ์ ธ์ ์ฌ์ฉ
- <Link to="?page=2"> ์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ํ์ด์ง ์ด๋
- ์ฅ์
- URL์page์ ๋ณด๊ฐ ์์ด์ ๊ณต์ ๊ฐ๋ฅ
- SSR (์๋ฒ์ฌ์ด๋ ๋ ๋๋ง) ํ๊ฒฝ์์ ์ ํฉ
- ์๋ก๊ณ ์นจํด๋ page์ ๋ณด ์ ์ง๋จ
- ๋จ์
- ํ์ด์ง ์ด๋ ์ ์ ์ฒด ๋ฆฌ๋ ๋๋ง ๋ฐ์ ๊ฐ๋ฅ
- API ์์ฒญ์ด ๋ง์์ง ์๋ ์์ (์ด์ ๋ฐ์ดํฐ ์ ์งํ๋ ค๋ฉด ์บ์ฑ ํ์)
- ์ธ์ ์ ํฉํ๊ฐ?
๐๐ป ํ์ด์ง๋ค์ด์ ๋ ๋ฐ์ดํฐ๋ฅผ URL๋ก ๊ณต์ ํด์ผ ํ ๋ (์: ๊ฒ์ ๊ฒฐ๊ณผ ํ์ด์ง, ๋ธ๋ก๊ทธ ๋ฆฌ์คํธ)
3. Form ํ๊ทธ + submit์ผ๋ก ํ์ด์ง ์ด๋ (์ ํต์ ์ธ ๋ฐฉ์)
- ๋ฐฉ๋ฒ
- input(hidden)์ page ๊ฐ์ ๋ฃ๊ณ submit ์ ์๋ก์ด GET ์์ฒญ
- ?page=2์ ๊ฐ์ URL ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ๋ฐฑ์๋์์ ์ฒ๋ฆฌ
- ์ฅ์
- ๋ฐฑ์๋ ์ค์ฌ์ ํ์ด์ง๋ค์ด์ ์ ์ ํฉ
- ๊ธฐ๋ณธ์ ์ธ HTML ๋์์ ์ฌ์ฉํ๋ฏ๋ก ์ถ๊ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ํ์ ์์
- ๋จ์
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์ ๋์ ์ธ ํ์ด์ง ์ ํ์ด ์ด๋ ค์
- ํ์ด์ง ์ด๋ ์ ์ ์ฒด ์๋ก๊ณ ์นจ ๋ฐ์
- ์ธ์ ์ ํฉํ๊ฐ?
๐๐ป SSR ๊ธฐ๋ฐ ์น์ฌ์ดํธ์์ ์ ํต์ ์ธ ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ ๋ (์: Django, Spring ๊ธฐ๋ฐ ์๋ฒ ๋ ๋๋ง)
๋ด๊ฐ ์ ํํ ๋ฐฉ์ : 1 + 2
- useSearchParams๋ฅผ ํ์ฉํด page ๊ฐ์ URL์์ ์ฝ๊ณ , (์๋ชป๋จ : ํ๋จ ์ค๋ช )
- useEffect๋ก page๊ฐ ๋ณ๊ฒฝ๋ ๋ API ์์ฒญ
- Link๋ navigate๋ฅผ ํ์ฉํด URL์ ์ ๋ฐ์ดํธ
๐จusequeryParams์ ๋ฌธ์ ์
์์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ฌ ํ์ด์ง๋ค์ด์ '๋ค์' ๋ฒํผ์ ๋๋ ๋๋ ์ค๋ฅ๊ฐ ์๊ฒผ๋ค.
ํ์ด์ง์ URL์ด
http://localhost:3000/category/now-playing
๐๐ป
http://localhost:3000/category/page=2
์ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉฐ not found ํ์ด์ง๊ฐ ๋ํ๋ฌ๋ค.
API์ ์๋ํฌ์ธํธ์ 'page=' ๊ฐ์ด ๋ณ๊ฒฝ๋๊ธธ ๊ธฐ๋ํ์ง๋ง ํ์ฌ ํ์ด์ง์ url์ด ์์ ๋ ๊ฒ์ด๋ค.
'useSearchParams๋ฅผ ํ์ฉํ์ฌ page ๊ฐ์ URL์์ ์ฝ๊ณ ' ๐๐ป ์ด ๋ถ๋ถ์์ ์ค๋ฅ๊ฐ ์๋ค.
์ด ๋ฐฉ์์ ํ์ฌ ํ์ด์ง ๋งํฌ์ ๊ฐ์ ๊ฐ์ ธ์จ๋ค.
์๋ฒ ์ปดํฌ๋ํธ์์ searchParams๋ URL์ ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ด๊ณ ์๋ค.
์๋ฅผ ๋ค์ด, URL์ด https://example.com/now-playing?page=2 ์ผ ๋, searchParams.page๋ "2"๋ผ๋ ๊ฐ์ ๊ฐ์ง๋ค.
๋ด๊ฐ ๊ธฐ๋ํ ๋ฐ๋ก ๋์ํ๊ธฐ ์ํด์๋ URL ๊ตฌ์กฐ๊ฐ ์ ์ง๋๋ฉด์ ํ์ด์ง ๋ฒํธ๋ง ๋ณ๊ฒฝ๋์ด์ผ ํ๋ค.
http://localhost:3000/category/now-playing/2
http://localhost:3000/category/now-playing/3
๊ทธ๋ฌ๊ธฐ ์ํด์๋ ๋์ ๋ผ์ฐํ ๊ตฌ์กฐ๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์ ํฉํด๋ณด์ธ๋ค.

- ์ถ๊ฐ ํ๊ตฌ ๋ด์ฉ
- ๋์ ๋ผ์ฐํธ๋ก ํ์ผ ๊ตฌ์กฐ๋ฅผ ๋์์ ๋, ํ๋ฆ ๋ฐ ๋ก์ง ๊ตฌ์ฑ ๋ฐฉ์?
- ํ์ด์ง์ ๋ฒํผ์ ๊ด๊ณ?
'Project' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [์ฌ๋๋ณ_Day2] ํต์ฌ ๊ธฐ๋ฅ ๋ถ์ (0) | 2025.04.01 |
|---|---|
| [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (2) - ๋์ ๋ผ์ฐํ ์๋ ๋ฐฉ์ (0) | 2025.03.24 |
| [NEXTFLIX_Day2] ๊ตฌ์กฐํ ๋ฐ ์ ์ (5) | 2025.03.22 |
| [LoL info App_Final] LoL ์ ๋ณด ํ์ด์ง (0) | 2025.03.19 |
| [Outsourcing_Final] HotPlace In Seoul ๐ฅ (1) | 2025.03.05 |