패캠 React 공부(4. 리액트 컴포넌트)

min seung moon·2021년 11월 16일
0

React공부(feat.패캠)

목록 보기
8/8

1. Component

01. Pure JS

  • DOM 엘리먼트를 자바스크립트에서 갖고와서 이벤트 전달
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }

    #root p {
      color: white;
      font-size: 20px;
      background-color: green;
      text-align: center;
      width: 200px;
    }

    #btn_plus {
      background-color: red;
      border: 2px solid #000000;
      font-size: 15px;
      width: 200px;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <button id="btn_plus">+</button>
  
  <script type="text/javascript">
    const root = document.getElementById("root");
    const btn_plus = document.getElementById("btn_plus");

    let i = 0;

    root.innerHTML = '<p>init : 0</p>';
    btn_plus.addEventListener('click', () => {
      root.innerHTML = `<p>init : ${++i}</p>`;
    })
  </script>
</body>

</html>

02. 컴포넌트 변수 사용

  • 컴포넌 변수를 정의하고, 실제 DOM에 컴포넌트를 그려준다
    • 컴포넌트는 데이터를 갖고 있으며 행위에 따라 데이터는 변경이 가능하다
    • render는 상태(데이터)에 따라 보여주게 해준다
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }

    #root p {
      color: white;
      font-size: 20px;
      background-color: green;
      text-align: center;
      width: 200px;
    }

    #btn_plus {
      background-color: red;
      border: 2px solid #000000;
      font-size: 15px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <button id="btn_plus">+</button>
  <script>
    const component = {
      message: 'init',
      count: 0,
      render() { // 실제 html로 변환될 때
        return `<p>${this.message} : ${this.count}</p>`
      }
    };

    // rootElement에 component 삽입
    function render(rootElement, component) { // 1. Dom 인자, 2. Component 인자
      rootElement.innerHTML = component.render();
    }
    render(document.getElementById('root'), component);
  
    // button에 이벤트 넣어주기
    document.getElementById('btn_plus').addEventListener('click', () => {
      component.message = 'update';
      component.count = component.count + 1;
  
      // 리렌더링, 위에 업데이트 된 데이터 전달
      render(document.getElementById('root'), component);
    })
  </script>
</body>
</html>

03. ReactDOM & React.CreateElement 사용(function)

    1. Component는 함수라고 생각을 하고 들어가자
    1. Component는 React Element를 반환해주어야 한다
  • React.createElement(element, attribute(상태), content)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }

    #root p {
      color: white;
      font-size: 20px;
      background-color: green;
      text-align: center;
      width: 200px;
    }

    #btn_plus {
      background-color: red;
      border: 2px solid #000000;
      font-size: 15px;
      width: 200px;
    }
  </style>
  <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>
  <button id="btn_plus">+</button>
  
  <script>
    // 1. component 인자, 2. 그려줄 인자
    // ReactDOM.render(/*리액트 컴포넌트*/, document.getElementById('root'));

    // 1. Component는 함수라고 생각을 하고 들어가자
    // 2. Component는 React Element를 반환해주어야 한다
    // React.createElement(element, attribute(상태), content)
    const Component = props => {
      return React.createElement('p', null, `${props.message} : ${props.count}`)
    }

    ReactDOM.render(
      React.createElement(Component, {
          message: 'init',
          count: 0
        }
        , null
      )
    , document.getElementById('root'));

    document.getElementById('btn_plus').addEventListener('click', () => {
      ReactDOM.render(
        React.createElement(Component, {
            message: 'update',
            count: 10
          }
          , null
        )
      , document.getElementById('root'));
    })
</script>
</body>
</html>

04. ReactDOM & React.CreateElement 사용(class)

  • class 형 Component를 만들어준다
    • React.Component를 상속 받는다
    • render()시 ReactElement를 꼭 return 해주어야 한다
  • script 타입이 바벨이기 때문에
    • 바벨도 CDN 방식으로 가져온다
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }

    #root p {
      color: white;
      font-size: 20px;
      background-color: green;
      text-align: center;
      width: 200px;
    }

    #btn_plus {
      background-color: red;
      border: 2px solid #000000;
      font-size: 15px;
      width: 200px;
    }
  </style>
  <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>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  
  <script type="text/babel">
    // 1. component 인자, 2. 그려줄 인자
    // ReactDOM.render(/*리액트 컴포넌트*/, document.getElementById('root'));
    // React.createElement(element, attribute(상태), content)
  
    // 정의
    // React.Component는 render()시 ReactElement를 꼭 return 해주어야 한다
    class ClassComponent extends React.Component {
      render() {
        return <div>Hello</div>;
      }
    }
    // // 사용
    ReactDOM.render(<ClassComponent/> , document.getElementById('root'));
</script>
</body>
</html>

05. React.CreateElement(문자열, 리액트컴포넌트, Fragment)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <div id="root1"></div>
  <div id="root2"></div>
  <div id="root3"></div>
  <div id="root4"></div>
  <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>
  <script>
    /*
    React.creaElement(
      type, // 태그이름 문자열 | 리액트 컴포넌트 | React.Fragment
      [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
      [...children] // 자식으로 넣어주는 요소들
    )
    */
  
    // 1. 태그이름 문자열 type
    // <h1>type 이 "태그 이름 문자열" 입니다.</h1>
    ReactDOM.render(
      React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다.`)
      ,document.querySelector('#root1')
    );
  
    // 2. 리액트 컴포넌트 type
    // <p>type이 "React 컴포넌트" 입니다.</p>
    const Component = () => {
      return React.createElement('p', null, `type이 "React 컴포넌트" 입니다.`);
    }
    // <Component></Component>
    ReactDOM.render(
      React.createElement(Component, null, null),
      document.getElementById('root2')
    );
  
    // 3. React.Fragment
    // <>type이 "React Fragment" 입니다.</>
    ReactDOM.render(
      React.createElement(React.Fragment, null, `type이 "React Fragment" 입니다.`),
      document.getElementById('root3')
    )
    
    // 4. 복잡한 리액트 엘리먼트 모임
    // <div>
    //   <div>
    //     <h1>주제</h1>
    //     <ul>
    //       <li>React</li>
    //       <li>Vue</li>
    //     </ul>
    //   </div>
    // </div>
    ReactDOM.render(
      React.createElement(
        'div'
        , null
        , React.createElement(
          'div'
          , null
          , React.createElement('h1', null, '주제')
          , React.createElement(
            'ul'
            , null
            , React.createElement('li', null, 'React')
            , React.createElement('li', null, 'Vue')
          )
        )
      ),
      document.getElementById('root4')
    )
  </script>
</body>
</html>

profile
min seung moon
아직까지는 코린이!
이전 포스트

React정리6(배열 렌더링 및 추가, 삭제, 수정)

0개의 댓글