❏ react - 함수형 컴포넌트 만들기!

 

 

안녕하세요!

 

오늘은 함수형 컴포넌트에 대해서 알아보고 함수형 컴포넌트 생성에 대해서 알아보겠습니다.

 

---

함수형 컴포넌트란??

함수형 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말합니다.

함수 컴포넌트는 클래스로 작성하는 것보다 빠르게 작성할 수 있으며 많은 컴포넌트를 함수 컴포넌트로 표현할 수 있습니다.

 

✏  구조

function /*컴포넌트 이름*/() {
  return (
    <div>
      /*jsx 입력*/
    </div>
  );
};

✏  예시 코드

function Header(){
  return <header>
    <h1><a href='/'>React</a></h1>
  </header>
}

 

컴포넌트를 선언할 때는 꼭 대문자를 시작으로 이름을 정해야하는 관례가 있습니다.

 

Header,  Nav ➨ 생성가능,

article, nav ➨생성불가

 

또한 컴포넌트는 하나의 태그만 리턴(retrun)할 수 있습니다.

---

✏  예제 

 

아래와 같은 코드를 작성해야한다고 가정을 해보겠습니다.

일반적으로 코드를 작성하게 된다면...

import './App.css';

function App() {
  return (
    <div>
     <header>
    	<h1><a href='/'>React</a></h1>
 	 </header>
     <nav>
        <ol>
          <li>html</li>
          <li>css</li>
          <li>js</li>
        </ol>
  	</nav>
     <article>
        <h2>Welcome</h2>
   		 Hello, WEB
  	</article>
      </div>
  );
}

export default App;

이렇게 작성을 해야합니다. 

하지만 예시처럼 몇줄이 되지 않은 코드면 괜찮겠지만 만약 header의 h1태그가 수백 줄이라면 다 작성을 하게 된다면 시간이 엄청나게 소요되며 비효율적일 것입니다.

 

그렇기에  컴포넌트를 사용하여 코드를 간결하게 정리할 수 있으며 수정 시 매우 편리하게 수정을 할 수 있습니다.

 

그럼 함수형 컴포넌트를 사용해 볼까요??

import './App.css';
/*함수형 컴포넌트 선언*/
function Header(props){
  return <header>
    <h1><a href='/'>React</a></h1>
  </header>
}

function Nav(){
  return <nav>
    <ol>
      <li>html</li>
      <li>css</li>
      <li>js</li>
    </ol>
  </nav>
}

function Article(){
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}

/*함수형 컴포넌트 적용 후*/
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
      </div>
  );
}

export default App;

 

간결하게 정리되어진 모습을 볼 수 있었으며, 서버에서도 동일하게 보이는 것도 확인해 볼 수 있었습니다.

---

이번 시간에는 함수형 컴포넌트에 대해서 알아보았는데요! 

함수형 컴포넌트는 단독적인 사용보다는 Hook과 함께 사용된다고 합니다.

Hook의 더 자세한 설명은 아래를(공식) 참고해 주시고

기회가 된다면 다뤄보도록 하겠습니다.

 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

 

 

오늘도 읽어주셔서 감사합니다!

♡ ٩(´▽`)۶ ♡