๐Ÿ”ซ React_01 React component, JSX

qhflrnfl4324ยท2022๋…„ 1์›” 3์ผ
2

React

๋ชฉ๋ก ๋ณด๊ธฐ
1/5
post-thumbnail

๐ŸŽฎ My first React component

๐ŸŽฒ Hello.js

import React from "react";

function Hello() {
  return <div>์•ˆ๋…•ํ•˜์„ธ์š”</div>;
}

export default Hello;
  • import React from "react"; : ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋• ๋ฆฌ์•กํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค.
  • export default Hello; : 'Hello'๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚ด๋ณด๋‚ด๊ฒ ๋‹ค๋Š” ์˜๋ฏธ

๐ŸŽฒ App.js

  • ์ปดํฌ๋„ŒํŠธ : ์ผ์ข…์˜ UI ์กฐ๊ฐ์œผ๋กœ ์‰ฝ๊ฒŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

๐ŸŽฒ index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));
  • ReactDOM.render : ๋ธŒ๋ผ์šฐ์ €์— ์žˆ๋Š” ์‹ค์ œ DOM ๋‚ด๋ถ€์— ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ
  • document.getElementById("root") : public/index.html ๋‚ด๋ถ€์˜ <div id="root"></div>
    => ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง ๋  ๋•Œ, ๋ Œ๋”๋ง๋œ ๊ฒฐ๊ณผ๋ฌผ ์œ„ div ๋‚ด๋ถ€์— ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒƒ

๐ŸŽฎ JSX์˜ ๊ธฐ๋ณธ ๊ทœ์น™

  • JSX๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์ƒ๊น€์ƒˆ๋ฅผ ์ •์˜ํ•  ๋•Œ, HTML๊ณผ ๋น„์Šทํ•ด ๋ณด์ด์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” JavaScript์ด๋‹ค.

๐ŸŽฒ ๊ผญ ๋‹ซํ˜€์•ผ ํ•˜๋Š” ํƒœ๊ทธ

  • ํƒœ๊ทธ๋Š” ๊ผญ ๋‹ซํ˜€์žˆ์–ด์•ผ ํ•œ๋‹ค.
  • ํƒœ๊ทธ์™€ ํƒœ๊ทธ ์‚ฌ์ด์— ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ€์ง€ ์•Š์„ ๋•Œ์—๋Š”, Self Closing ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

๐ŸŽฒ ๊ผญ ๊ฐ์‹ธ์ ธ์•ผํ•˜๋Š” ํƒœ๊ทธ

  • ๋‘ ๊ฐœ ์ด์ƒ์˜ ํƒœ๊ทธ๋Š” ๋ฌด์กฐ๊ฑด ํ•˜๋‚˜์˜ ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ ธ์žˆ์–ด์•ผ ํ•œ๋‹ค.
import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <div>์•ˆ๋…•ํžˆ๊ณ„์„ธ์š”</div>
    </div>
  );
}

export default App;
  • ๋‹จ์ˆœํžˆ ๊ฐ์‹ธ๊ธฐ ์œ„ํ•ด ๋ถˆํ•„์š”ํ•œ div๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.
    => ์ด๋Ÿด ๋• ๋ฆฌ์•กํŠธ์˜ Fragment<></>๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
    => Fragment๋Š” ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ๋”ฐ๋กœ ๋ณ„๋„์˜ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š๋Š”๋‹ค.

๐ŸŽฒ JSX ์•ˆ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ’ ์‚ฌ์šฉํ•˜๊ธฐ

  • JSX ๋‚ด๋ถ€์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณ€์ˆ˜๋ฅผ ๋ณด์—ฌ์ค˜์•ผ ํ•  ๋•Œ {}์„ ๊ฐ์‹ธ์„œ ๋ณด์—ฌ์ค€๋‹ค.
import React from "react";
import Hello from "./Hello";

function App() {
  const name = "react";
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

๐ŸŽฒ style ๊ณผ className

  • ์ธ๋ผ์ธ ์Šคํƒ€์ผ์€ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ž‘์„ฑ
  • background-color ์ฒ˜๋Ÿผ -๋กœ ๊ตฌ๋ถ„๋˜์–ด ์žˆ๋Š” ์ด๋ฆ„์€ backgroundColor์ฒ˜๋Ÿผ camelCase ํ˜•ํƒœ๋กœ ๋„ค์ด๋ฐ
  • class ๋ช…์„ ์ง€์ •ํ•  ๋•Œ className=๋กœ ์ง€์ •
import React from "react";
import Hello from "./Hello";
import "./App.css";

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: "white",
    fontSize: 24, // ๊ธฐ๋ณธ ๋‹จ์œ„ px
    padding: "1rem", // px ์ด์™ธ์˜ ๋‹จ์œ„ ์‚ฌ์šฉ์‹œ ๋ฌธ์ž์—ด๋กœ ์„ค์ •
  };

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

๐ŸŽฒ ์ฃผ์„

  • JSX ๋‚ด๋ถ€ ์ฃผ์„ ํ˜•ํƒœ : {/* ์ฃผ์„ ๋‚ด์šฉ */}
  • ์—ด๋ฆฌ๋Š” ํƒœ๊ทธ ๋‚ด๋ถ€์—์„œ ์ฃผ์„ ํ˜•ํƒœ : // ์ฃผ์„ ๋‚ด์šฉ

์ฐธ๊ณ 

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

comment-user-thumbnail
2022๋…„ 1์›” 3์ผ

์šฐ์™€ ๋ฆฌ์•กํŠธ๊ฐ€ ๊ฒŒ์ž„๊ฐ™์ด ์žฌ๋ฐŒ์–ด๋ณด์—ฌ์š”~~

1๊ฐœ์˜ ๋‹ต๊ธ€