Jieunny์˜ ๋ธ”๋กœ๊ทธ

S2) Unit 4. [React] ๊ธฐ์ดˆ ๋ณธ๋ฌธ

CodeStates/learning contents

S2) Unit 4. [React] ๊ธฐ์ดˆ

Jieunny 2023. 1. 20. 12:00

๐Ÿ“ฃ ๋ฆฌ์•กํŠธ

โœ”๏ธ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ JS ์˜คํ”ˆ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

โœ”๏ธ ๋ฐ˜๋“œ์‹œ JSX๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฑด ์•„๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋ฌธ๋ฒ•์ ์œผ๋กœ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๊ณ  ๋ณต์žกํ•ด์ง€๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

 

 

๐Ÿ“ฃ ๋ฆฌ์•กํŠธ์˜ ํŠน์ง•

1๏ธโƒฃ ์„ ์–ธํ˜•(Declarative)

โžฐ ํ•œ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ๋ช…์‹œ์ ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ JSX(HTML + JS)๋ฅผ ํ™œ์šฉํ•œ ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€ํ–ฅ

โžฐ HTML/ CSS/ JS ๋กœ ๋‚˜๋ˆ  ์ ์„ ํ•„์š”๊ฐ€ ์—†๋‹ค.

 

2๏ธโƒฃ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜(Component-Based)

โžฐ ์ปดํฌ๋„ŒํŠธ : ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ์ฝ”๋“œ๋ฅผ ๋ฌถ์–ด๋‘” ๊ฒƒ (๊ตฌ์กฐ์™€ ๋™์ž‘์— ๋Œ€ํ•œ ์ฝ”๋“œ๋ฅผ ํ•œ ๋ญ‰์น˜๋กœ ์ ์€ ์ฝ”๋“œ์…‹)

โžฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์„œ๋กœ ๋…๋ฆฝ์ ์ด๊ณ , ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ๊ธฐ๋Šฅ ์ž์ฒด์— ์ง‘์ค‘ํ•˜์—ฌ ๊ฐœ๋ฐœ ๊ฐ€๋Šฅํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•˜๋‹ค.

 

3๏ธโƒฃ ๋ฒ”์šฉ์„ฑ(Learn Once, Write Anywhere)

โžฐ JS ํ”„๋กœ์ ํŠธ ์–ด๋””์—๋‚˜ ์œ ์—ฐํ•˜๊ฒŒ ์ ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

โžฐ Facebook ์—์„œ ๊ด€๋ฆฌ๋˜์–ด ์•ˆ์ •์ ์ด๋ฉฐ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋ฐ”์ผ ๊ฐœ๋ฐœ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค. 

 

 

๐Ÿ“ฃ JSX ๋ž€?

โœ”๏ธ JavaScript XML ์˜ ์ค„์ž„๋ง

โœ”๏ธ ๋ฆฌ์•กํŠธ์—์„œ UI๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ๋ฒ•์œผ๋กœ JS๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•

โœ”๏ธ HTML + JS + CSS ๋ฅผ JSX + CSS ๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋‹ค.

โœ”๏ธ JSX๋Š” HTML์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— Babel(JSX->JS๋กœ ๋ณ€ํ™˜)์„ ์ด์šฉํ•œ ์ปดํŒŒ์ผ ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค.

 

 

๐Ÿ“ฃ React๋กœ ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑํ•˜๊ธฐ

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };
  
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

โžฐ ํ•˜๋‚˜์˜ ํŒŒ์ผ์—์„œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์กฐ์™€ ๋™์ž‘์„ ํ•œ ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

๐Ÿ“ฃ JSX์˜ ํ™œ์šฉ

โœ”๏ธ ์—ฌ๋Ÿฌ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ž‘์„ฑํ•˜๊ณ ์ž ํ•  ๋•Œ๋Š”, ์ตœ์ƒ์œ„์—์„œ opening tag์™€ closing tag ๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

<div>	//ํ•˜๋‚˜์˜ div๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.
	<div>
    	<h1>Hello</div>
    </div>
    <div>
    	<h2>World</h2>
    </div>
</div>

 

โœ”๏ธ class๋ฅผ ์ค„๋•Œ๋Š” className์œผ๋กœ ํ‘œ๊ธฐํ•ด์•ผ ํ•œ๋‹ค.

<div className="greeting">Hello</div>

๐Ÿšจ class๋กœ ์ž‘์„ฑํ•˜๋ฉด JSํด๋ž˜์Šค๋กœ ๋ฐ›์•„๋“ค์ด๊ฒŒ ๋œ๋‹ค.

 

โœ”๏ธ JSX์—์„œ JS๋ฅผ ์“ฐ๋ ค๋ฉด ๊ผญ ์ค‘๊ด„ํ˜ธ๋ฅผ ์ด์šฉํ•ด์•ผํ•œ๋‹ค.

function App() {
	const name = 'Jieun';
    
    return (
    	<div>
        	Hello, {name}
        </div>
    );
}

๐Ÿšจ ์ค‘๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์ผ๋ฐ˜ ํ…์ŠคํŠธ๋กœ ์ธ์‹ํ•œ๋‹ค.

 

โœ”๏ธ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ JSX๋กœ ์ž‘์„ฑ๋˜๋ฉด ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•œ๋‹ค. -> ๋Œ€๋ฌธ์ž๋กœ ์ž‘์„ฑ๋œ JSX์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ ์ปดํฌ๋„ŒํŠธ ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

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

function HelloWorld() {
	return <Hello />;
}

๐Ÿšจ ์†Œ๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜๋ฉด ์ผ๋ฐ˜์ ์ธ HTML ์—˜๋ฆฌ๋จผํŠธ๋กœ ์ธ์‹ํ•œ๋‹ค.

 

โœ”๏ธ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์€ if๋ฌธ์ด ์•„๋‹Œ ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ์ด์šฉํ•ด์•ผ ํ•œ๋‹ค.

<div>
{
	(1+1 === 2) ? (<p>์ •๋‹ต</p>) : (<p>ํƒˆ๋ฝ</p>)
}
</div>

 

โœ”๏ธ ์—ฌ๋Ÿฌ ๊ฐœ์˜ HTML ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ‘œ์‹œํ•  ๋•Œ๋Š” map() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

const posts = {
	{id:1, title:...
}

function Blog() {
	const content = posts.map((post) =>
    	<div key={post.id}>
        	<h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );
    return (
    	<div>
        	{content}
        </div>
    );
}

๐Ÿšจ๋ฐ˜๋“œ์‹œ 'key' JSX์†์„ฑ์„ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค. 

โž• key ์†์„ฑ

๋”๋ณด๊ธฐ

โžฐ map() ํ•จ์ˆ˜ ์‚ฌ์šฉ์‹œ, key์†์„ฑ์„ ๋„ฃ์ง€ ์•Š์œผ๋ฉด ๋ฆฌ์ŠคํŠธ์˜ ๊ฐ ํ•ญ๋ชฉ์— key๋ฅผ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋œ๋‹ค.

โžฐ key ์†์„ฑ์˜ ์œ„์น˜๋Š” map ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์— ์žˆ๋Š” ์ฒซ ์—˜๋ฆฌ๋จผํŠธ์— ๋„ฃ์–ด์ค€๋‹ค.

โžฐ key ์†์„ฑ๊ฐ’์€ id์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ณ€ํ•˜์ง€ ์•Š๊ณ , ์˜ˆ์ƒ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ์œ ์ผํ•ด์•ผ ํ•œ๋‹ค.

โžฐ ์ • ๊ณ ์œ ํ•œ id๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ ์ตœํ›„์˜ ์ˆ˜๋‹จ์œผ๋กœ ๋ฐฐ์—ด ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

โœ๏ธ ๋ฌธ์ œ

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // ํ•œ ํฌ์ŠคํŠธ์˜ ์ •๋ณด๋ฅผ ๋‹ด์€ ๊ฐ์ฒด post๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›๊ณ 
  // obj๋ฅผ JSX ํ‘œํ˜„์‹์œผ๋กœ ๋ฐ”๊ฟ” ๋ฆฌํ„ดํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // TODO: postToJSX ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์—˜๋ฆฌ๋จผํŠธ๋กค ํ‘œ์‹œํ•ด๋ณด์„ธ์š”.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}

 

๐Ÿ“ฃ Component

โœ”๏ธ component : ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ์ฝ”๋“œ ๋ฌถ์Œ

โœ”๏ธ ๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ฐ์ž ๋…๋ฆฝ์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๋ฉฐ, UI์˜ ํ•œ ๋ถ€๋ถ„์„ ๋‹ด๋‹นํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

โœ”๏ธ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์กฐํ•ฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

 

โœ”๏ธ ๋ชจ๋“  ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์ตœ์†Œ ํ•œ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

โœ”๏ธ ์ด ์ปดํฌ๋„ŒํŠธ๋Š” root์—ญํ• ์„ ํ•˜๋ฉฐ, ๋‹ค๋ฅธ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค. (์ด ๊ตฌ์กฐ๋ฅผ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ํ˜•์ƒํ™” ํ•  ์ˆ˜ ์žˆ๋‹ค.)

 

๐Ÿ“ฃ Create React App

โœ”๏ธ ๋ฆฌ์•กํŠธ SPA(Single Page Application)๋ฅผ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ง„ ํˆด ์ฒด์ธ

โœ”๏ธ ํ„ฐ๋ฏธ๋„ -> mkdir ๋ฆฌ์•กํŠธ๋งŒ๋“คํด๋”์ด๋ฆ„ -> npx create-react-app ์›ํ•˜๋Š”ํ”„๋กœ์ ํŠธ๋ช…

'CodeStates > learning contents' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

S2) Unit 6. [React] React State & Props  (2) 2023.01.26
S2) Unit 5. [React] React SPA  (0) 2023.01.25
S2) Unit 3. [JS] fetch & Axios  (0) 2023.01.19
S2) Unit 3. [JS] Node.js  (0) 2023.01.18
S2) Unit 3. [JS] ๋น„๋™๊ธฐ(Callback, Promise, Async/Await)  (0) 2023.01.17