[React] Components

컴포넌트 중 함수형 컴포넌트에 대해 알아본다.

설명에 앞서 컴포넌트 쓰임의 이유에 대해 코드를 보며 느껴보자.

function App() {
  return (
    <div>
    	<header>
    		<h1><a href = "/">WEB</a></h1>
    	</header>
    	<nav>
    		<ol>
    			<li><a href='/read/1'>html</a></li>
                <li><a href='/read/2'>html</a></li>
                <li><a href='/read/3'>html</a></li>
                <li><a href='/read/4'>html</a></li>
                <li><a href='/read/5'>html</a></li>
    		</ol>
    	</nav>
    	<article>
    		<h2>Welcome</h2>
    		Hello, Web
    	</article>
    </div>
    };
}

위의 코드처럼 a 태그 안에 있는 링크와 정보가 무수히 많으면 유지보수에 용이하지 않으며 효율적이지 않다.

그렇기에 component 를 만들어 보다 효율적인 코드를 작성해보자.

여기서 주의할 점! component 작성 시 이름은 대문자로 시작해야한다.

1. Header Component

function Header(){
  return <header>
    <h1><a herf="/">WEB</a><h1>
  </header>
};

2. Nav Component

function Nav(){
  return <nav>
    		<ol>
    			<li><a href='/read/1'>html</a></li>
                <li><a href='/read/2'>html</a></li>
                <li><a href='/read/3'>html</a></li>
                <li><a href='/read/4'>html</a></li>
                <li><a href='/read/5'>html</a></li>
    		</ol>
    	</nav>
};

3. Article Component

function Nav(){
  return <article>
    		<h2>Welcome</h2>
    		Hello, Web
    	<article>
};

이와 같이 component 로 만들면 여러 태그들을 하나의 독립된 부품으로 만들 수 있고 가독성과 생산성을 향상시킨다.

컴포넌트를 사용할 땐 아래와 같이 적용하면 된다.

function App() {
  return (
    <div>
    	<Header></Header>
    	<Nav></Nav>
    	<Article></Article>
    </div>
    };
}

처음 코드와 비교해 보면 훨씬 간결해짐을 알 수 있다.