리액트 - 3. 컴포넌트 만들기

컴포넌트 만들기

 

 1. 리액트 컴포넌트

    리액트 컴포넌트를 살펴보기 전 컴포넌트에 대해 정리!

 

    컴포넌트 란? 

     - 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 '모듈'로서 

     시스템을 유지보수 하는데 있어서 교체 가능한 부품을 의미한다. 

     

     - 이는 재사용성을 높이고 유지보수를 용이하게 해 준다. 

 

    리액트에서 컴포넌트 란?

    - 리액트에서 컴포넌트란 독립적으로 기능들을 캡슐화하는 리액트의 최소 단위이다.

 

    - 개념적으로 컴포넌트는 부모로 부터 props라고 하는 상태(속성)를 전달받아 화면에 어떻게 표시되는지 기술하는

      React Element를 반환하는 함수이다. 

    

    - 이 컴포넌트는 블록들을 조합해서 원하는 것을 만들 수 있는 제품인 레고 처럼 기능별로 쪼개서 이것들을 조합해서

      사용자가 보는 view를 만든다. 

 

    - 자주 사용되는 기능들은 컴포넌트화하면 재사용성이 높아지고 유지 보수하기가 용이하다. 

    

    

    1) 함수 컴포넌트 

      - 리액트에서는 함수 컴포넌트랑 클래스 컴포넌트가 있다. 

      - 리액트 16.8 이하 버전만 해도 함수 컴포넌트에서는 상태를 관리할 수 없었고 state나 라이프사이클 api를 사용

        하지 않을 때 혹은 props를 받아서 단순히 랜더링 하는 용도로만 사용되었다.    

 

      - 리액트 16.8 버전부터 Hooks의 등장으로 상태를 관리할 수 있게 되었다. 

        (이 부분은 state 관리하는 부분에서 정리!)

 

      여기서는 주로 함수 컴포넌트로 정리!

      (클래스 컴포넌트는 깃헙에 정리해놓아서 링크 참조!)

 

      클래스 컴포넌트에 대해 도움 되는 사이트

      → https://velopert.com/3613 (벨로버트님 블로그)

 

 

 

    2) 컴포넌트 생성하기 

     컴포넌트를 만들어보기! 

 

     우선, src 디렉터리에 helloReact.js라는 파일을 생성하고 다음과 같이 

     작성한다. 

 

import React from 'react';
 
function HelloReact() {
  return <div>리액트 시작하기!</div>
}
 
export default HelloReact;

 

   

    💡 최상단에 import React from 'react'; 는 CRA 4.0 버전부터 작성하지 않아도 된다. (즉 필수가 아님)

        원래는 react라는 모듈을 불러와줘야 JSX 문법을 사용할 수 있었다. 

        (단 리액트 속성들, useState 등을 사용할 때는 반드시 작성해야 한다.)

 

   

    함수 부분에 보면 엘리먼트 형태로 리턴해주었는데 이 부분은 view에 반영된다. 마지막으로 export default 부분은

    HelloReact라는 컴포넌트를 내보내겠다는 의미이다. 이렇게 해주면 다른 컴포넌트에서 불러와서 (import) 사용할

    수 있다. 이 컴포넌트를 한번 App 컴포넌트에 불러와서 사용해보자!

 

    

import React from 'react';
import Hello from './HelloReact';
 
function App() {
  return (
    <div>
      <HelloReact/>
    </div>
  );
}
 
export default App;

    

      

   컴포넌트는 앞서 말했듯이 재사용할 수 있다. 즉, HelloReact 컴포넌트를 몇 번이고 불러올 수 있다. 

   (컴포넌트는 쉽게 말해서 일종의 UI 조각들이라고 보면 된다.) 

 

import React from 'react';
import Hello from './HelloReact';
 
function App() {
  return (
    <div>
      <HelloReact/>
      <HelloReact/>
      <HelloReact/>
    </div>
  );
}
 
export default App;

     

 

 

   (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'));

 

   최종적으로 App 컴포넌트는 index.js 파일에 불러와서 화면에 랜더링하게 된다.  

   index.js 파일을 보면 ReactDOM.render 가 있는데 이는 브라우저에 있는 실제 

   DOM 내부에 리액트 컴포넌트를 랜더링하겠다는 의미이다. 

 

 

   (index.html)

<div id="root"></div>

   

  즉, ReactDOM.render(<App />, document.getElementById('root') 의 의미는  App 컴포넌트를

  랜더링한 결과물을 id가 root인 div 태그 내부에 반영하겠다는 의미이다.