ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 프론트엔드 개발자를 위한 리액트 기초 part-3
    Javascript& React study 2021. 2. 24. 21:50
    728x90
    반응형
    SMALL

    리액트에서 컴포넌트라는 것은 개념적으로 prop를 input으로 하고 UI가 어떻게 보여야 하는지 정해야 하는 React Element를 output으로 하는 함수를 뜻합니다. 그래서 합성을 이용해서 UI를 재사용할 수 있으며 또한 독립적인 단위로 쪼개서 생각을 할 수 있습니다 그래서 컴포넌트라는 것은 React.Component 를 상속받아서 정의를 할 수 있지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장합니다.

     

    또한 UI를 구성하기 위해서는 화면에 컴포넌트를 그리면서 갱신하고 지워야 하는데 여기서 컴포넌트는 각 프로세스가 진행이 될 때 Lifecycle 함수로 불리는 특별한 함수가 실행이 됩니다. 여기서 개발자는 이를 재정의하면서 컴포넌트를 제어하게 됩니다.

     

    리액트에서 컴포넌트 만들기

    // App.js 
    import React from "react";
    import "./App.css";

    function App() {
       return <div>Hello React!</div>;
    }
    export default App;

    터미널에서 npm start React코드를 실행시키면 된다.

    이 코드는 App함수는 React에서 사용하는 하나의 큰 컴포넌트이다.

    return에서 우리가 화면에 그리고자 하는 HTML을 작성하면 react HTML을 인식하고 브라우저에 그리게 된다.

    import React from "react";
    import "./App.css";

    function App() {
      return (
               <div>
                    <div>Hello React!</div>
                    <button>button</button>
                     // 버튼 추가
             </div>
        );
    }

    export default App;

    JSX 가 무엇일까요?

    function App() {
       return <div>Hello React!</div>;
    }

     - 여기서 <div>Hello React!</div>는 HTML을 다루는 방식으로 JSX라고 부릅니다.

     - JSX는 React에서 HTML을 쉽게 사용할 수 있는 문법이라고 보면 된다. 

     - 브라우저는 HTML,CSS,Javascript만 이해할 수 있지만 어떻게 저런 문법을 사용할 수 있는것일까?

     - 그것은 create react app으로 React앱을 최초 생성할 때 설치되는 라이브러리 babel JSX라는 문법을 이해할 수 있게 해줍니다.

     - 이는 JSX로 HTML을 작성하면 React 파일을 실행하게 될 떄 babel이 자동으로 JSX를 코드를 브라우저가 이해할 수 있는 Javascript 코드로 변환해준다.

    728x90
    반응형
    LIST

    댓글

Designed by Tistory.