LWW

CS / FrontEnd / Programming / DataScience

2 분 소요

1. Component를 만드는 법

  • Hooks 이전
    • Component 내부에 상태가 있다면 : class
    • Component 내부에 상태가 없다면
      • Lifecycle을 사용해야 한다면 : class
      • Lifecycle에 관계 없다면 : function
  • Hooks 이후
    • class
    • function
import React from 'react';

// Class Component 정의
class ClassComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

// 사용
<ClassComponent />



import React from 'react';

// Function Component 정의 1
function FunctionComponent() {
  return <div>Hello</div>;
}

// Function Component 정의 2
const FunctionComponent = () => <div>Hello</div>;

// 사용
<FunctionComponent />


2. React.createElement로 Component 만들기

// React.createElement 요소

React.createElement(
  type, // 태그 이름 문자열 | React Component | React.Fragment
  [props],  // React Component에 넣어주는 데이터 객체
  [...children]  // 자식으로 넣어주는 요소들
);


- 태그 이름 문자열 type

<!-- index.html -->

<body>
  <div id="root"></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 type="text/javascript">
    console.log(React);
    console.log(ReactDOM);

    // 1. 태그 이름 문자열 type
    // <h1>type이 "태그 이름 문자열" 입니다.</h1>
    ReactDOM.render(
      React.createElement('h1', null, `type이 "태그 이름 문자열" 입니다.`),
      document.querySelector('#root')
    );
  </script>
</body>


react-component1


- React Component type

<body>
  <div id="root"></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 type="text/javascript">
    console.log(React);
    console.log(ReactDOM);

    // 2. React Component type
    const Component = () => {
      return React.createElement('p', null, `type 이 "React Component 입니다."`);
    }

    // <Component></Component> => <Component /> => <p>type 이 "React Component 입니다.</p>
    ReactDOM.render(
      React.createElement(Component, null, null), document.querySelector('#root')
    );
  </script>
</body>


react-component2


- React.Fragment

<body>
  <div id="root"></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 type="text/javascript">
    console.log(React);
    console.log(ReactDOM);

    // 3. React.Fragment
    ReactDOM.render(
      React.createElement(React.Fragment, null, 
        `type 이 "React Fragment" 입니다.`,
        `type 이 "React Fragment" 입니다.`,
        `type 이 "React Fragment" 입니다.`
      ),
      document.querySelector('#root')
    );
  </script>
</body>


react-component3


- 복잡한 React Element 모임(createElement 한계)

  • 정상작동 하지만, 가독성이 매우 떨어짐
<body>
  <div id="root"></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 type="text/javascript">
    console.log(React);
    console.log(ReactDOM);

    // 4. 복잡한 React Element 모임(createElement 한계)
    // <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.querySelector('#root')
    )
  </script>


react-component4


3. JSX

  • JSX 문법으로 작성된 코드는 순수한 JavaScript로 Compile하여 사용
  • Babel 사용
  • JSX를 사용하는 이유
    • React.createElement보다 가독성 측면에서 압도적
    • babel과 같은 compile 과정에서 문법적 오류를 인지하기 쉬움
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">



<body>
  <div id="root"></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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // 우리가 작성한 어떤 코드 => 순수하게 실행할 수 있는 JavaScript
    // babel
    ReactDOM.render(
      <div>
        <div>
          <h1>주제</h1>
          <ul>
            <li>React</li>
            <li>Vue</li>
          </ul>
        </div>
      </div>,
      document.querySelector('#root')
    );
  </script>
</body>


react-component4


- JSX 문법

  • 최상위 요소가 하나여야 함
  • 최상위 요소 리턴하는 경우, ()로 감싸야 함
  • 자식들을 바로 Rendering하고 싶으면, <>자식들</>를 사용 => Fragment
  • JavaScript 표현식을 사용하려면, {표현식}을 이용
  • if문은 사용할 수 없음
    • 삼항 연산자 혹은 && 사용
  • style을 이용해 inline 스타일링 가능
  • class 대신 className을 사용해 class를 적용할 수 있음
  • 자식요소가 있으면 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 함
    • <p>abc</p>
    • <br />

댓글남기기

참고