use client 1
[Next.js] Server component vs Client component

์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ vs ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ ์ฒ˜์Œ ๋ฐฑ์—”๋“œ ์„œ๋ฒ„์—์„œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์™€ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ชจ๋‘ ๋ Œ๋”๋ง ํด๋ผ์ธํŠธ ์ปดํฌ๋„ŒํŠธ๋งŒ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋‹ค์‹œ ๋ Œ๋”๋ง, ๋‹ค์‹œ hydrated(activate) ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค์šด๋กœ๋“œํ•˜์—ฌ ์‹คํ–‰ํ•˜๊ณ , ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค์šด๋กœ๋“œ X ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋”ฑ ํ•œ๋ฒˆ๋งŒ ์„œ๋ฒ„์— ์˜ํ•ด ์‹คํ–‰ -> ์œ ์ €๋Š” HTML ์–ป์Œ ๊ทธ ๋‹ค์Œ, ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ hydrate -> ์ƒํ˜ธ์ž‘์šฉ ๊ฐ€๋Šฅ ๋ชจ๋“  ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ถ”๊ฐ€, useState, API, ์ง€๋ฆฌ ์ •๋ณด..etc ์›ํ•˜๋Š” ๊ฒฝ์šฐ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ๋‚ด์— ํฌํ•จ ๊ฐ€๋Šฅ (๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ X) "use client"๋ฅผ ์“ฐ์ง€ ์•Š์œผ๋ฉด, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋‘ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์ด๋‹ค.
Next.js 2024.03.19
1
๋”๋ณด๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”