codeStates front-end/React

[React] JSX, Component

ํ™˜ํ…Œํฌ 2023. 1. 20. 15:16
๋ฐ˜์‘ํ˜•

 

 

 

 

 

 

 

 

๐Ÿ“Œ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๊ฐœ๋…

 

 

๐Ÿ“JSX

 

JavaScript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•

React์—์„œ๋Š” DOM๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ css,jsx ๋ฌธ๋ฒ•๋งŒ์„ ๊ฐ€์ง€๊ณ  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

DOM์—์„œ JS์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” js์™€ html์„ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์ž‘์—…์ด ํ•„์š”

Inline ๋ฐฉ์‹์ด๋‚˜ script ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ์™ธ๋ถ€ js ํŒŒ์ผ์„ ์—ฐ๊ฒฐ ๊ฐ€๋Šฅ

 

 

๐Ÿ”– jsx๋ฅผ ์จ์•ผํ•˜๋Š” ์ด์œ 

 

๋ช…์‹œ์  ์ฝ”๋“œ ์ž‘์„ฑ : js ๋ฌธ๋ฒ•๊ณผ html ๋ฌธ๋ฒ•์„ ๋™์‹œ์— ์ด์šฉํ•ด ๊ธฐ๋Šฅ ๊ตฌ์กฐ๋ฅผ ํ•œ๋ˆˆ์— ํ™•์ธ ๊ฐ€๋Šฅ

์ฝ”๋“œ๋‹จ์ˆœํ™”, ๊ฐ€๋…์„ฑ

 

 

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

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // ์ฃผ์„์„ ์—†์• ์„œ ์‹ค์Šตํ•ด๋ณด๊ธฐ
  // JSX ์—†์ด ํ™œ์šฉํ•œ React
  // return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX ๋ฅผ ํ™œ์šฉํ•œ React
  // return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

 

 

 

๐Ÿ”– jsx ํ™œ์šฉ

 

 

1๏ธโƒฃ ํ•˜๋‚˜์˜ ์—˜๋ฆฌ๋จผํŠธ ์•ˆ์— ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ํฌํ•จ

 

<div> // ํ•˜๋‚˜์˜ ์—˜๋ฆฌ๋จผํŠธ ์•ˆ์—
	<div> // ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ํฌํ•จ
    	<h1>Hello</h1>
    <div>
    	<h2>world</h2>
    <div>
    <div>
</div>

 

2๏ธโƒฃ ์—˜๋ฆฌ๋จผํŠธ ํด๋ž˜์Šค ์‚ฌ์šฉ ์‹œ, className ์œผ๋กœ ํ‘œ๊ธฐ

 

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

 

3๏ธโƒฃ js ํ‘œํ˜„์‹ ์‚ฌ์šฉ ์‹œ, ์ค‘๊ด„ํ˜ธ({ }) ์ด์šฉ

 

function App() {
	const name = 'Josh Perez';
    
    return(
    	<div>
        Hello, {name}! // jsx์—์„œ js๋ฅผ ์“ฐ๊ณ ์ž ํ•œ๋‹ค๋ฉด ๊ผญ ์ค‘๊ด„ํ˜ธ๋ฅผ ์ด์šฉ!
        </div>
    );
}

 

 

4๏ธโƒฃ ์‚ฌ์šฉ์ž ์ •์˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘

 

 

function Hello() { // ๊ผญ ๋Œ€๋ฌธ์ž๋กœ!
	return ~
}

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

 

 

5๏ธโƒฃ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์—๋Š” ์‚ผํ•ญ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ

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

 

 

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

 

6๏ธโƒฃ ์—ฌ๋Ÿฌ ๊ฐœ์˜ html ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ‘œ์‹œํ•  ๋•Œ, map() ํ•จ์ˆ˜๋ฅผ ์ด์šฉ

 

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

function Blog() {
	const content = posts.map((post) => // html ์—˜๋ฆฌ๋จผํŠธ ํ‘œ์‹œ "map()" ํ•จ์ˆ˜
    <div key = {post.id}>
    	<h3>{post.title}</h3>
    	<p>{post.content}</p>
    <div>
    );
}

return (
	<div>
    	{content}
    </div>
	);
}

 

 

 

post ์ •๋ณด๋ฅผ ๋‹ด์€ ๊ฐ์ฒด๋ฅผ jsx ํ‘œํ˜„์‹์œผ๋กœ ๋ฐ”๊ฟ” ๋ฆฌํ„ดํ•ด์ฃผ๋Š” ํ•จ์ˆ˜

 

 

 

 

๐Ÿ“Component-Based

 

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

"UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ํ•„์ˆ˜ ์š”์†Œ"

"์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ์•กํŠธ์˜ ์‹ฌ์žฅ"

 

 

 

๋ชจ๋“  ๋ฆฌ์•กํŠธ ์•ฑ์€ ์ตœ์†Œ ํ•œ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ,

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

 

๋ฐ˜์‘ํ˜•