[React] Component와 Props

Component

컴포넌트란 재사용이 가능한 독립적인 요소입니다.
React에서는 UI를 구성하는 작은 단위 하나하나를 컴포넌트라고 합니다.

컴포넌트의 필요

HTML을 작성하게 되면 크게 헤더영역, 네비게이션, 컨텐츠, 푸터와 같이 레이아웃을 나누어 작성하게됩니다.

하나의 페이지에 많은 코드가 들어가게되고 그것을 하나의 html, css, js로 관리하게 되면 가독성과 유지보수가 어려워집니다.

React에서는 이러한 영역 또는 UI를 컴포넌트로 중복코드제거와 유지보수를 용이하게 합니다.

Component 분리

메인 컴포넌트

import React from "react";

function App(){
    return(
         <div>
       		<header>헤더<header>
            <nav>네비게이션</nav>
            <main>
              <ul>
                <li>컨텐츠1</li>
                <li>컨텐츠2</li>
                <li>컨텐츠3</li>
              </ul>
            </main>
            <footer>푸터</footer>
         </div>
    )
}

export default App;

메인 컴포넌트가 모든 컨텐츠를 가지고 컨텐츠가 많아지면 가독성과 유지보수를 하기에 어려워집니다.

컴포넌트 분리

import React from "react";
import Header from "Header";
import Navigation from "Navigation";
import Contents from "Contents";
import Footer from "Footer";

function App(){
    return(
         <div>
       		<Header/>
            <Navigation/>
            <Contents/>
            <Footer/>
         </div>
    )
}

export default App;

각 레이아웃 영역을 컴포넌트로 분리하여 각각의 컴포넌트에서 관리하게 됩니다.

Props

Props란 react에서 데이터를 넘기는 방법이라고 볼 수 있습니다.

컴포넌트는 독립적인 UI 요소로 분리되어 있는데 각 컴포넌트끼리 데이터를 주고 받는 방법으로 Props가 있습니다.

Props는 부모 컴포넌트에서 자식 컴포넌트로 이동하며 읽기전용으로 값을 수정할 수 없습니다.

props를 넘기는 방법은 2가지가 있습니다.

1. 속성
2. 태그의 컨텐츠 요소

부모 컴포넌트

import React from "react";
import Item from "Item";

function Contents(){
    return(
         <div>
        	<Item title="컨텐츠 1"/>
        	<Item title="컨텐츠 2"/>
        	<Item title="컨텐츠 3"/>
         </div>
    )
}

export default Contents;

자식 컴포넌트

import React from "react";

function Item(props){
  	
  	const {title} = props;
  
    return <div>{title}</div>
}

export default Contents;

props.children

컴포넌트 태그와 태그 사이에 있는 요소를 children이라고 합니다

1) 버튼과 같이 비슷한 기능을 하는 컴포넌트를 사용할때

<Button onClick={() => submit}>등록</Button>
<Button onClick={() => update}>수정</Button>
<Button onClick={() => remove}>삭제</Button>

2) 컴포넌트에 다른 컴포넌트를 전달하기 위해서 사용

<Welcome>
	<Hello />
</Welcome>

prop-types

Props로 넘어오는 데이터의 타입을 확인할 수가 없는데 prop-types npm 모듈로 체크할 수 있습니다.

number와 String , Array 등 해당 프롭의 타입이 올바른지 확인 할 수 있습니다.

npm install prop-types

import React from "react";
import PropTypes from "prop-types";

function Movie({id, year, title, summary, poster ,genres}) {
  return (
   //...
  );
}

Movie.prototype = {
  id: PropTypes.number.isRequired,
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;