TIL] React-Component

link717ยท2020๋…„ 10์›” 5์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
34/48

๐Ÿ˜ Component

React app์€ component๋กœ ๋งŒ๋“ค์–ด์กŒ๋‹ค. component๋Š” ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ์˜ ๋ฌถ์Œ ๊ฐ™์€๊ฒƒ์œผ๋กœ ํ•˜๋‚˜์˜ ์ผ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ผ์€ HTML์„ re-rendering ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

  • import React from 'react': ์ด ์ฝ”๋“œ๋Š” React๋ผ๋Š” ์ด๋ฆ„์˜ ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ์ƒ์„ฑํ•œ ๋ณ€์ˆ˜๋Š” JavaScrip object library๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ฝ”๋“œ์ด๋‹ค.(ex: React.createElement(), React.Component)

  • import ReactDOM from 'react-dom: React์™€ ๊ด€๋ จ์ด ์žˆ๋Š” method๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ฝ”๋“œ์ด๋ฉฐ 'react-dom'์€ DOM๊ณผ ์ƒํ˜ธ์ž‘์šฉ ํ•  ์ˆ˜ ์žˆ๋Š” DOM์— ํŠนํ™”๋œ method์ด๋‹ค.(ex:ReactDOM.render())

  • class YourComponentNameGoesHere extends React.Component {}: ์‚ฌ์šฉ์ž ์ง€์ • component์˜ class๋ฅผ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ๋ฒ•์ด๋‹ค. ์ด ๋•Œ compolnent class์˜ ์ด๋ฆ„์€ UpperCamelCase๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.(ex: MyComponentClass) ๊ทธ ์ด์œ ๋Š” ๊ธฐ์กด์˜ JSX element์™€ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•จ์ด๋‹ค.


๐Ÿง Import/Export

React.js๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ JavaScript ํŒŒ์ผ์€ ์„œ๋กœ ๋‹ค๋ฅธ ํŒŒ์ผ๋“ค์— ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋Š” ์ƒํƒœ์ด๋‹ค. ๋‹น์‹ ์ด ๋งŒ๋“  component๋“ค์„ ์œ ๊ธฐ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” import/export ์„ ์–ธ์ด ํ•„์š”ํ•˜๋‹ค. import๋Š” export์™€ ํ•ญ์ƒ ํ•จ๊ป˜ ์‚ฌ์šฉ๋œ๋‹ค.

[Named exports]

  • import: import๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด . ๋˜๋Š” / ํ˜•ํƒœ์˜ file ๊ฒฝ๋กœ๋ฅผ ์ž…๋ ฅํ•ด์•ผํ•˜๋Š”๋ฐ ๊ทธ ๋•Œ ๋’ค์— ๋ถ™๋Š” ํ™•์žฅ์ž ๋ช…์€ ์ƒ๋žต์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ(./NavBar.js โ†’ ./NavBar) import์˜ ์ด๋ฆ„์€ ๋ณ€์ˆ˜/ํ•จ์ˆ˜/Class ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•˜๊ณ  {}๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
 import { NavBar } from './NavBar.js';
 import { NavBar } from './NavBar';
  • export: export ์„ ์–ธ์€ ๋‹ค๋ฅธ ๊ณณ์œผ๋กœ code๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋ฉฐ export๊ฐ€ ํ•„์š”ํ•œ ์ฝ”๋“œ๋ฌธ ๋ฐ”๋กœ ๋’ค์— ์ž‘์„ฑ๋œ๋‹ค. ์ด๋•Œ export๋Š” var, let, const, function, class ๋“ฑ ์–ด๋–ค ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋ฉฐ ๊ฐ™์€ ํŒŒ์ผ์—์„œ 2๊ฐœ ์ด์ƒ์˜ export๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
 export const alsoRan = 'TimeCube';

๐Ÿ™‰ Render ํ•จ์ˆ˜

class๋ฅผ ์ƒ์„ฑํ•  ๋•Œ class body ๋ถ€๋ถ„์—๋Š” render() method๊ฐ€ ์žˆ์–ด์•ผ ํ•˜๊ณ  โ‘ method๋Š” return์„ ๊ผญ ํฌํ•จํ•ด์•ผ ํ•œ๋‹ค. ๋ณดํ†ต return ๋ฌธ์€ JSX ์ฝ”๋“œ๋ฅผ return ํ•œ๋‹ค. render ํ•จ์ˆ˜๋Š” class๋กœ ์ž‘์„ฑ๋œ component๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ์ผ์„ ์ •์˜ํ•œ๋‹ค.

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

โ‘ก render logic์ด ์‹คํ–‰๋˜๊ธฐ ์ „์˜ logic์€ reder method ์•ˆ์—์„œ ์ง„ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค.

class Random extends React.Component {
  render() {
    // First, some logic that must happen
    // before rendering:
    const n = Math.floor(Math.random() * 10 + 1);
    // Next, a return statement
    // using that logic:
    return <h1>The number is {n}!</h1>;
  }
}

โŽ์ž˜๋ชป๋œ ๋ฐฉ์‹: render() ๋ฐ”๊นฅ์˜ ๋ณ€์ˆ˜ ์„ ์–ธ์€ syntax error๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.

class Random extends React.Component {
  // This should be in the render function:
  const n = Math.floor(Math.random() * 10 + 1);

  render() {
    return <h1>The number is {n}!</h1>;
  }
};
profile
์‹œ์ž‘์ž…๋‹ˆ๋‹ค.

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