[REACT] class component ์ƒ์„ฑ

poseassomeยท2022๋…„ 1์›” 13์ผ
0

REACT

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

๐ŸŒฑ React ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

1. ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ฐœ์„ 

SPA(Single Page Application)
์›น ํŽ˜์ด์ง€๋ฅผ ์•ฑ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๊ฒŒ ํ•œ๋‹ค. (ํŽ˜์ด์ง€ ๊นœ๋นก์ž„์ด ์—†๋‹ค.)

2. ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ

๋ฐ์ดํ„ฐ์™€ ํ™”๋ฉด์„ ์ผ์น˜์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

3. ์œ ์ง€๋ณด์ˆ˜ ์šฉ์ด

์ปดํฌ๋„ŒํŠธํ™”ํ•˜์—ฌ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Ž ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ

html๋ฌธ์„œ์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ <div id="root"> </div>๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

์ด๋Š” component๋“ค์ด ๋‹ด๊ธธ ๋ถ€๋ถ„์ด๋‹ค.
์šฐ์„  react๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ  CDN๋ฐฉ์‹์œผ๋กœ ๊ฐ€์ ธ์˜ค๋„๋ก ํ•œ๋‹ค.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

react๋Š” javascript๊ธฐ๋ฐ˜์ด๋ฏ€๋กœ <script>์•ˆ์— ์ž‘์„ฑํ•˜๋„๋ก ํ•œ๋‹ค.

class component ์ƒ์„ฑ

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return e('button', { onClick: () => { console.log('clicked') }, type: 'submit' }, 'Like');
    // --> <button type="submit">Like</button> ์ด๋Ÿฐ ํƒœ๊ทธ๋ฅผ ํ˜•์„ฑํ•˜๊ฒ ๋‹ค.
  }
}

React.createElement๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜์—ฌ component์„ ์ž‘์„ฑํ•œ๋‹ค.

React.createElement( component, props, ...children )
// ์ˆœ์„œ๋Œ€๋กœ 'HTML ์š”์†Œ', 'HTML ์†์„ฑ', 'text'์„ ์ž‘์„ฑํ•œ๋‹ค.

'HTML ์†์„ฑ'์„ ์ž‘์„ฑํ•  ๋•Œ๋Š” camel case๋กœ ์ž‘์„ฑํ•œ๋‹ค (onclick -> onClick)

state(์ƒํƒœ)

component์˜ ๊ฐ•์ ์œผ๋กœ state(์ƒํƒœ)๊ฐ€ ์žˆ๋‹ค.
์œ„ example์—์„œ ๋งŒ์•ฝ Like ๊ธ€์ž๊ฐ€ ๋ฐ”๋€๋‹ค๋ฉด Like๊ฐ€ state๊ฐ€ ๋œ๋‹ค.

์ฆ‰, ๋ฐ”๋€” ์—ฌ์ง€๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์ด state(์ƒํƒœ)์ด๋‹ค.
์ƒํƒœ๋Š” this.state ={ } ๋กœ ์ž‘์„ฑํ•œ๋‹ค.

  • react developer tools ์„ค์น˜ํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ณ„๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฐ”๋€ ์ƒํƒœ๋ฅผ ํ™”๋ฉด์— ๋ฐ˜์˜ํ•˜๋ ค๋ฉด render(){ } ์•ˆ์—์„œ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค.

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked: false,     // <-- ๊ธฐ๋ณธ ์ƒํƒœ
    }
  }

  render() {
    return e(
      'button',
      { onClick: () => { this.setState({ liked: true }) }, type: 'submit' },
      this.state.liked === true ? 'Liked' : 'Like'
    );
    // ํด๋ฆญ์„ ํ•˜๋ฉด true๋กœ ๋ฐ”๊ฟ”์คŒ
  }
}

this.state.liked๊ฐ€ true์ด๋ฉด button์˜ text๋ฅผ Liked๋กœ ๋ฐ”๊ฟ”๋ผ.

์—ฌ๊ธฐ์„œ, classํ•˜๋‚˜๊ฐ€ componentํ•˜๋‚˜๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.


๐Ÿ“‘ ์ „์ฒด ์ฝ”๋“œ

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div> <!-- ๊ฒฐ๊ณผ: <div id="root"><button>Like</button></div> -->
  <script>
    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          liked: false,     // <-- ๊ธฐ๋ณธ ์ƒํƒœ
        }
      }

      render() {
        // return e('button', { onClick: () => { console.log('clicked') }, type: 'submit' }, 'Like');
        // --> <button type="submit">Like</button> ์ด๋Ÿฐ ํƒœ๊ทธ๋ฅผ ํ˜•์„ฑํ•˜๊ฒ ๋‹ค.
        return e('button', { onClick: () => { this.setState({ liked: true }) }, type: 'submit' }, this.state.liked === true ? 'Liked' : 'Like');
        // ํด๋ฆญ์„ ํ•˜๋ฉด true๋กœ ๋ฐ”๊ฟ”์คŒ
      }
    }
  </script>
  <script>
    ReactDOM.render(e(LikeButton), document.querySelector('#root'));
  </script>
</body>

</html>
profile
Frontend Developer

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