์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ

tsx ํŒŒ์ผ์—๋Š” Server ๋“  client ๋“  FC ๋ฅผ ๋ถ™์—ฌ์•ผํ•ด ?

๋ฒจ๋ณด์ด 2024. 5. 29. 15:59

๐Ÿค” tsx ํŒŒ์ผ์—๋Š” Server ๋“  client ๋“  FC ๋ฅผ ๋ถ™์—ฌ์•ผํ•ด ? 

๐Ÿง ์žฅ๋‹จ์ 

 

TSX ํŒŒ์ผ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•  ๋•Œ FC (Functional Component) ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์„ ํƒ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ์ž์˜ ์„ ํ˜ธ๋„์™€ ํŒ€์˜ ์ฝ”๋“œ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. FC ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ Props ํƒ€์ž…์„ ๋ช…์‹œํ•˜๊ณ , ๊ธฐ๋ณธ์ ์œผ๋กœ children prop์„ ํฌํ•จํ•˜๋Š” ๋“ฑ์˜ ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

์žฅ์ 
FC ํƒ€์ž…์€ children์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ํฌํ•จํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ”๊ฐ€์ ์ธ ํƒ€์ž… ์ •์˜๊ฐ€ ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค.
์ปดํฌ๋„ŒํŠธ์˜ Props ํƒ€์ž…์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๋‹จ์ 
FC ํƒ€์ž…์€ ๊ธฐ๋ณธ์ ์œผ๋กœ children์„ ํฌํ•จํ•˜๊ธฐ ๋•Œ๋ฌธ์—, children์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ children prop์ด ํ•„์š”ํ•  ๊ฒƒ์œผ๋กœ ๋ณด์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ผ๋ถ€ ๊ฒฝ์šฐ์—๋Š” ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋ณต์žกํ•ด ๋ณด์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๊ฒฐ๋ก 
๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— FC ํƒ€์ž…์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ, ํ•„์š”์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒ€์˜ ์ฝ”๋“œ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๋‚˜ ๊ฐœ์ธ์˜ ์„ ํ˜ธ๋„์— ๋”ฐ๋ผ ๊ฒฐ์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ FC ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ฝ”๋“œ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  ํƒ€์ž… ์ •์˜๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ํ•œ๋‹ค๋ฉด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ๊ตณ์ด ์‚ฌ์šฉํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค.

๐Ÿ˜†  FC ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ

 

FC ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์ด์ ์„ ๋” ์ž˜ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, Props์˜ ํƒ€์ž…์„ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์ •ํ•˜๊ณ  children์„ ์ž๋™์œผ๋กœ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

import React, { FC } from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: FC<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

export default MyComponent;

 

import React from 'react';

interface MyComponentProps {
  title: string;
  children?: React.ReactNode;
}

const MyComponent = ({ title, children }: MyComponentProps) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

export default MyComponent;