๐Ÿ’ป JSX ์ดํ•ดํ•˜๊ธฐ(feat. ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ)

waterglassesยท2022๋…„ 11์›” 23์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
46/50
post-thumbnail

โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ทผ๋ณธ์ ์œผ๋กœ JSX๋Š” React.createElement(component, props, ...children) ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๋ฌธ๋ฒ•์  ์„คํƒ•์„ ์ œ๊ณตํ•  ๋ฟ์ด๋‹ค.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

์œ„์˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ปดํŒŒ์ผ๋ฉ๋‹ˆ๋‹ค.

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

React Element์˜ ํƒ€์ž… ์ง€์ •ํ•˜๊ธฐ

JSX ํƒœ๊ทธ์˜ ์ฒซ ๋ถ€๋ถ„์€ React element์˜ ํƒ€์ž…์„ ๊ฒฐ์ •ํ•œ๋‹ค.

๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” JSX ํƒœ๊ทธ๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์ด ํƒœ๊ทธ๋“ค์€ ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ€์ง„ ๋ณ€์ˆ˜๋“ค์„ ์ง์ ‘ ์ฐธ์กฐํ•œ๋‹ค.

React๊ฐ€ ์Šค์ฝ”ํ”„ ๋‚ด์— ์กด์žฌํ•ด์•ผํ•œ๋‹ค.

JSX๋Š” React.createElement๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ฝ”๋“œ๋กœ ์ปดํŒŒ์ผ ๋˜๊ธฐ ๋•Œ๋ฌธ์— React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—ญ์‹œ JSX์ฝ”๋“œ์™€ ๊ฐ™์€ ์Šค์ฝ”ํ”„ ๋‚ด์— ์กด์žฌํ•ด์•ผ ํ•œ๋‹ค.

JSX ํƒ€์ž…์„ ์œ„ํ•œ ์  ํ‘œ๊ธฐ๋ฒ• ์‚ฌ์šฉ

์  ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•ด์„œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ํ•˜๋‚˜์˜ ๋ชจ๋“ˆ์—์„œ ๋ณต์ˆ˜์˜ React ์ปดํฌ๋„ŒํŠธ๋“ค์„ export ํ•˜๋Š” ๊ฒฝ์šฐ์— ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

์‚ฌ์šฉ์ž ์ •์˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ˜๋“œ์‹œ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค

๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ํƒ€์ž…๋“ค์€ React.createElement(Foo)์˜ ํ˜•ํƒœ๋กœ ์ปดํŒŒ์ผ๋˜๋ฉฐ JavaScript ํŒŒ์ผ ๋‚ด์— ์‚ฌ์šฉ์ž๊ฐ€ ์ •์˜ํ–ˆ๊ฑฐ๋‚˜ importํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

์‹คํ–‰ ์ค‘์— ํƒ€์ž… ์„ ํƒํ•˜๊ธฐ

React element ํƒ€์ž…์— ์ผ๋ฐ˜์ ์ธ ํ‘œํ˜„์‹์€ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. element ํƒ€์ž…์„ ์ง€์ •ํ•  ๋•Œ ์ผ๋ฐ˜์ ์ธ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ณ€์ˆ˜์— ๋ฐฐ์ •ํ•œ ํ›„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // JSXํƒ€์ž…์€ ํ‘œํ˜„์‹์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.
  // return <components[props.storyType] story={props.story} />;

	// ์•„๋ž˜์ฒ˜๋Ÿผ ๋ณ€์ˆ˜์— ์ง€์ •ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

JSX ์•ˆ์—์„œ์˜ prop ์‚ฌ์šฉ

JavaScript Expressions as Props

<MyComponent foo={1 + 2 + 3 + 4} />

๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด

// ๋™์ผํ•œ ํ‘œํ˜„
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

Props์˜ ๊ธฐ๋ณธ๊ฐ’์€ โ€œTrueโ€

// ๋™์ผํ•œ ํ‘œํ˜„
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

์ผ๋ฐ˜์ ์œผ๋กœ prop์— ๋Œ€ํ•œ ๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•œ๋‹ค.

์†์„ฑ ํŽผ์น˜๊ธฐ

props์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ์ด๋ฏธ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด ...๋ฅผ ์ „๊ฐœ ์—ฐ์‚ฐ์ž๋กœ ์‚ฌ์šฉํ•ด ์ „์ฒด ๊ฐ์ฒด๋ฅผ ๊ทธ๋Œ€๋กœ ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ๋‹ค.

// ๋™์ผํ•œ ํ‘œํ˜„
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

// ์•„๋ž˜์ฒ˜๋Ÿผ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;

์ „๊ฐœ ์—ฐ์‚ฐ์ž๋Š” ๊ผญ ํ•„์š”ํ•  ๋•Œ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค. ๋ถˆํ•„์š”ํ•œ prop์ด๋‚˜ ์œ ํšจํ•˜์ง€ ์•Š์€ HTML ์†์„ฑ๋“ค์„ DOM์— ๋„˜๊ธฐ๊ธฐ๋„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

JSX์—์„œ ์ž์‹ ๋‹ค๋ฃจ๊ธฐ

์—ฌ๋Š” ํƒœ๊ทธ์™€ ๋‹ซ๋Š” ํƒœ๊ทธ ์‚ฌ์ด์˜ ๋‚ด์šฉ์€ props.children ์ด๋ผ๋Š” ํŠน์ˆ˜ํ•œ prop์œผ๋กœ ๋„˜๊ฒจ์ง„๋‹ค.

๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด

<MyComponent>Hello world!</MyComponent>

์—ฌ๊ธฐ์„œ MyComponent์˜ props.children์€ โ€˜Hello world!โ€™์ด๋‹ค.

JSX๋ฅผ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ

JSX element๋ฅผ ์ž์‹์œผ๋กœ ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ๋‹ค.

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

๋˜ํ•œ element๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

render() {
  // ๋ฆฌ์ŠคํŠธ ์•„์ดํ…œ๋“ค์„ ์ถ”๊ฐ€์ ์ธ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๋‘˜๋Ÿฌ์Œ€ ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค!
  return [
    // key ์ง€์ •์„ ์žŠ์ง€ ๋งˆ์„ธ์š” :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

JavaScript ํ‘œํ˜„์‹์„ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ

// ๋™์ผํ•œ ํ‘œํ˜„
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

ํ•จ์ˆ˜๋ฅผ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ

๋ณดํ†ต JSX์— ์‚ฝ์ž…๋œ JavaScript ํ‘œํ˜„์‹์€ ๋ฌธ์ž์—ด, React element ํ˜น์€ ์ด๋“ค์˜ ๋ฐฐ์—ด๋กœ ํ™˜์‚ฐ๋œ๋‹ค. props.children์€ ๋‹ค๋ฅธ prop๋“ค๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ React๊ฐ€ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ์˜ ํ˜•ํƒœ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์–ด๋–ค ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋„ ๋„˜๊ฒจ์งˆ ์ˆ˜ ์žˆ๋‹ค.

// ์ž์‹ ์ฝœ๋ฐฑ์ธ numTimes๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐ˜๋ณต๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

boolean, null, undefined๋Š” ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค

// ๋™์ผํ•˜๊ฒŒ ๋ Œ๋”๋ง
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

React element๋“ค์„ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋งํ•  ๋•Œ ์œ ์šฉํ•˜๋‹ค. ํ•œ๊ฐ€์ง€ ์ฃผ์˜ํ•  ์ ์€ 0๊ณผ ๊ฐ™์€ falsyํ•œ ๊ฐ’๋“ค์€ React๊ฐ€ ๋ Œ๋”๋ง ํ•œ๋‹ค๋Š” ์ ์ด๋‹ค.

// ์•„๋ž˜ ์˜ˆ์‹œ๋Š” props.message๊ฐ€ ๋ฐฐ์—ด์ผ ๋•Œ 0์„ ์ถœ๋ ฅํ•œ๋‹ค.
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

๐Ÿ”ฅ ๋Š๋‚€์ 

์ „์ฒด์ ์œผ๋กœ ๋ณต์Šตํ•˜๋Š” ๋Š๋‚Œ์œผ๋กœ ์ฝ์—ˆ๊ณ  ํ•˜๋‚˜ ์ œ๋Œ€๋กœ ๊ฐœ๋…์„ ์žก๊ฒŒ ๋œ ๋ถ€๋ถ„์€ ์ผ๋ฐ˜์ ์œผ๋กœ prop์— ๋Œ€ํ•œ ๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋ถ€๋ถ„์ด๋‹ค. ๊ทธ๋™์•ˆ true๊ฐ’ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” prop๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š์•˜๋˜ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ ์•ž์œผ๋กœ ์ธ์ง€ํ•˜๊ณ  ์‚ฌ์šฉํ•ด์•ผ๊ฒ ๋‹ค.

Refer

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€