๐Ÿ’› ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ์ ์ธ ๊ฐœ๋… ์ •๋ฆฌ (CRA, JSX)

leehyunjuยท2021๋…„ 5์›” 3์ผ
0

๐Ÿ‘ฉ๐Ÿป ์ตœ๋Œ€ํ•œ ์„ฑ๋Šฅ์„ ์•„๋ผ๊ณ  ํŽธ์•ˆํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉด์„œ ๊ตฌํ˜„ํ•˜๊ณ ์ž ๊ฐœ๋ฐœํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ๋ฆฌ์•กํŠธ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์˜ค์ง V(view)๋งŒ ์‹ ๊ฒฝ ์“ฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ์‚ฌ์‹ค ์ฒ˜์Œ์—๋Š” ๋ฆฌ์•กํŠธ๊ฐ€ ํ”„๋ ˆ์ž„์›Œํฌ์ธ์ง€, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ์ง€ ์–ด๋””์„œ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ผํ•˜๊ณ  ๊ทธ๋ž˜์„œ ํ—ท๊ฐˆ๋ ธ์—ˆ๋Š”๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ž€๋‹ค ๐Ÿ˜ถ

๊ทธ ์™ธ์— ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

๋ผ์šฐํŒ… : React Router
Ajax : axios, fetch
์ƒํƒœ๊ด€๋ฆฌ : Redux, Mobx, Redux-saga, Redux-thunk, GraphQL, Apollo, Relay

CRA (Create-react-app)์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ํ•„์š”ํ•œ ์›นํŒฉ, ๋ฐ”๋ฒจ์˜ ์„ค์น˜ ๋ฐ ์„ค์ • ๊ณผ์ •์„ ์ƒ๋žตํ•˜๊ณ  ๋ฐ”๋กœ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ”„๋กœ์ ํŠธ ์ž‘์—… ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ด ์ฃผ๋Š” ๋„๊ตฌ์ด๋‹ค. ๋‚˜์ค‘์— ์„ค์ •์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•ด์•ผ ํ•˜๋ฉด ์ž์œ ๋กญ๊ฒŒ ์„ค์ •์„ ๋ณ€๊ฒฝํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

npx create react-app <ํ”„๋กœ์ ํŠธ ์ด๋ฆ„>

์œ„ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ node_modules๋ผ๋Š” ๋””ํ…ํ† ๋ฆฌ๋„ ํ•จ๊ป˜ ์ƒ์„ฑ๋˜๋Š”๋ฐ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๊ณผ์ •์—์„œ ๋…ธ๋“œ๋ชจ๋“ˆ ๋””๋ ‰ํ† ๋ฆฌ์— react ๋ชจ๋“ˆ์ด ์„ค์น˜๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  import ๊ตฌ๋ฌธ์„ ํ†ตํ•ด ๋ฆฌ์•กํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

import React from 'react';

์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ๋ฒˆ๋“ค๋Ÿฌ๋Š” (bundle)๋ฌถ๋Š”๋‹ค ๋ผ๋Š” ๋œป์ด๋‹ค. ์ฆ‰, ํŒŒ์ผ์„ ๋ฌถ๋“ฏ์ด ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋Œ€ํ‘œ์ ์ธ ๋ฒˆ๋“ค๋Ÿฌ๋กœ ์›นํŒฉ, ๊ฑธํ”„๋ผ๋Š” ๋„๊ตฌ ๋“ค์ด ์žˆ์ง€๋งŒ ๊ฐ ๋„๊ตฌ๋งˆ๋‹ค ํŠน์„ฑ์ด ๋‹ค๋ฅด๋‹ค. ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์ฃผ๋กœ ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ด๋‹ค.

์ด์œ ๋Š” ํŽธ์˜์„ฑ๊ณผ ํ™•์žฅ์„ฑ์ด ๋‹ค๋ฅธ ๋„๊ตฌ๋ณด๋‹ค ๋›ฐ์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋ฒˆ๋“ค๋Ÿฌ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด import๋กœ ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™”์„ ๋•Œ ๋ถˆ๋Ÿฌ์˜จ ๋ชจ๋“ˆ์„ ๋ชจ๋‘ ํ•ฉ์ณ์„œ ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด ์ค€๋‹ค. ๋˜ ์ตœ์ ํ™” ๊ณผ์ •์—์„œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌ๋  ์ˆ˜๋„ ์žˆ๋‹ค. ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๋ฉด SVG ํŒŒ์ผ๊ณผ CSSํŒŒ์ผ๋„ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํŒŒ์ผ๋“ค์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์€ ์›นํŒฉ์˜ ๋กœ๋”๋ผ๋Š” ๊ธฐ๋Šฅ์ด ๋‹ด๋‹นํ•œ๋‹ค. ๋กœ๋”๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ข…๋ฅ˜๊ฐ€ ์žˆ๋Š”๋ฐ ์˜ˆ๋ฅผ ๋“ค์–ด css-loader๋Š” CSSํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๊ณ , file-loader๋Š” ์›น ํฐํŠธ๋‚˜ ๋ฏธ๋””์–ด ํŒŒ์ผ ๋“ฑ์„ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. ๊ทธ๋ฆฌ๊ณ  babel-loader๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋“ค์„ ๋ถˆ๋Ÿฌ์˜ค๋ฉด์„œ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์œผ๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ๋ฐ”๋ฒจ์ด๋ผ๋Š” ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ES5 ๋ฌธ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•ด ์ค€๋‹ค.

์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์™œ ๋ณ€ํ™˜ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ

ES5๋Š” ์ด์ „ ๋ฒ„์ „์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ES5 ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์€ ๊ตฌ๋ฒ„์ „ ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ์ด๋‹ค. ํ˜„์žฌ ๋Œ€๋ถ€๋ถ„์˜ ์ตœ์‹  ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ž์ฒด์ ์œผ๋กœ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ๋ฐ”๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ (ํฌ๋กฌ) ๊ตฌ๋ฒ„์ „ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„  ์‹คํ–‰๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์ „์— ๊ผญ ๋ณ€ํ™˜ํ•ด ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๋˜ํ•œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์— ์‚ฌ์šฉํ•˜๋Š” JSX๋ผ๋Š” ๋ฌธ๋ฒ•๋„ ์ •์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ด ์•„๋‹ˆ๋ฏ€๋กœ ES5 ํ˜•ํƒœ์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•œ๋‹ค.

JSX๋ž€?

JSX๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ™•์žฅ๋ฌธ๋ฒ•์ด๋ฉฐ XML๊ณผ ๋งค์šฐ ๋น„์Šท. ์ด๋Ÿฐ ํ˜•์‹์œผ๋กœ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๊ธฐ ์ „์— ์ฝ”๋“œ๊ฐ€ ๋ฒˆ๋“ค๋ง๋˜๋Š” ๊ณผ์ •์—์„œ ๋ฐ”๋ฒจ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ฐ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ˜•ํƒœ์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

function App() {
 return (
 	<div>
       	hello React
    </div>
   )
  }

JSX๋Š” ๋ฆฌ์•กํŠธ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฏ€๋กœ ๊ณต์‹์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์€ ์•„๋‹ˆ๋‹ค. ๋ฐ”๋ฒจ์—์„œ๋Š” ์—ฌ๋Ÿฌ ๋ฌธ๋ฒ•์„ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋„๋ก preset ๋ฐ plugin์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋ฒจ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž„์˜๋กœ ๋งŒ๋“  ๋ฌธ๋ฒ•, ํ˜น์€ ์ฐจ๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ•๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์žฅ์ 

  1. ๋ณด๊ธฐ ์‰ฝ๊ณ  ์ต์ˆ™ํ•˜๋‹ค. ( html ์ฝ”๋“œ์ฒ˜๋Ÿผ head๋ถ€๋ถ„์— ์—ฌ๋Ÿฌ ์ฝ”๋“œ๊ฐ€ ์—†์–ด์„œ ๊ฐ€๋…์„ฑ์ด ์ข‹๋‹ค)

  2. ๋”์šฑ ๋†’์€ ํ™œ์šฉ๋„ (JSX๋Š” ์•ž์œผ๋กœ ๋งŒ๋“ค ์ปดํฌ๋„ŒํŠธ๋„ JSX ์•ˆ์—์„œ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค)

JSX ๋ฌธ๋ฒ•์€ ๋ฐ˜๋“œ์‹œ ๋ถ€๋ชจ ์š”์†Œ ํ•˜๋‚˜๋กœ ๊ฐ์‹ธ์•ผํ•œ๋‹ค.

const Nicebook = ({ Component }) => {
  return (
    <div>
    </div>
  );
};

div ์‚ฌ์šฉํ•˜๊ธฐ ์‹ซ์œผ๋ฉด

(1) ์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•

const Nicebook = ({ Component }) => {
  return (
    <>
    
    </>
  );
};

(2) ๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•

import React, {Fragment} from "react";

const Nicebook = ({ Component }) => {
  return (
    <Fragment>
    
    </Fragment>
  );
};
profile
์•„๋Š‘ํ•œ ๋‡Œ๊ณต๊ฐ„ ๐Ÿง 

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