컴포넌트 (1) - JSX, 컴포넌트

JSX

• JSX는 JavaScript XML의 줄임말
• 자바스크립트에 XML을 추가한 확장형 문법
• 자바스크립트와 HTML을 분리하여 작성하지 않고 동시에 작성 할 수 있어 편함

 

• JSX 예시 (App.js):

  import React from 'react';
  
  class App extends React.Component {
    render() {
      return (
        // 아래의 내용이 JSX
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/160px-Google_%22G%22_Logo.svg.png" />
          <div>안녕하세요</div>
        </div>
      );
    }
  }
  export default App;​

  └ img의 맨 끝이 />로 끝남
      └ JSX는 HTML이 아니라 XML 마크업 규칙을 따르기 때문
• 결과 :

 

 

• JSX와 기존 개발 방법의 차이
  • 기존 index.js 코드 (index.js)

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();​

    └ ReactDOM.render(<App />, document.getElementById('root')); 가
        위의 JSX 예시 코드인 App.js 파일의 App 컴포넌트를 의미함
    
    
  • App 컴포넌트를 사용하지 않는다면 (index.js)

    var img = document.createElement('img');
    img.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/160px-Google_%22G%22_Logo.svg.png');
    var divElement = document.createElement('div');
    divElement.innerText = '안녕하세요';
    var welcomeElement = document.createElement('div');
    welcomeElement.append(img);
    welcomeElement.append(divElement);
    
    var root = document.getElementById('root');
    root.append(welcomeElement);

    └ 훨씬 더 복잡하며 비효율적으로 바뀌었음

 

---

컴포넌트와 구성 요소

• 컴포넌트의 개념
  • 기존의 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 정보, 화면, 구동 코드를 분리하여 관리했음
    Model : 정보 담당 / View : 화면 담당 / Controller : 구동 담당
    MVC 방식은 코드 관리를 효율적으로 할 수 있지만 각 요소들(MVC)의 의존성이 높아 하나만 바꾸기가 쉽지 않음
  • But, 웹 사이트의 화면은 각 요소가 비슷하고 반복적으로 사용하는 경우가 많아 컴포넌트가 등장하게 됨
    컴포넌트는 MVC(Model, View, Controller)의 뷰를 독립적으로 구성하여 하나만 바꿔도 되고
    컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들 수도 있음

 

• 간단한 컴포넌트 추가하기
  • TodayPlan 컴포넌트 만들기 (/src/Today/Today.jsx)

    import React from 'react';
    
    class Today extends React.Component {
      render() {
        return <div className="message-container">친구 만나기</div>;
      }
    }
    
    export default Today;

    
    
    
  • App 컴포넌트에 TodayPlan 컴포넌트 추가하기 (src/App.js)

    import React from 'react';
    
    import Today from './Today/Today';  // ⓐ
    
    class App extends React.Component {
      render() {
        return (
          <div className="body">
            <Today />  // ⓑ
          </div>
        );
      }
    }
    export default App;

    └ ⓐ : 새로 작성한 컴포넌트를 App.js에 임포트하였음
        ⓑ : 컴포넌트를 JSX 안에 마크업 형식으로 추가함
  • 결과 :
  

 

• 컴포넌트 구성 요소
  • 프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
  • state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
  • 컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터