[React] 컴포넌트(component)만들기

component

복잡한 태그들을 모아 하나의 그룹으로 만든 후 그 태그 사용하기.

function Header(){
	return (HTML로 내용담기)
}

1. function 만들고
   • 다른 function 바깥에 만들기 & 영어 대문자
2. return() 안에 html 담기
   • 축약하고 싶은 html 넣기
3. <함수명></함수명> 컴포넌트 쓰기

import logo from './logo.svg';
import './App.css';

// 컴포넌트를 만들 때는 함수로 만들어야하고 대문자를 사용해야 함
function Header(){
  // return 값으로 html 코드를 리턴하면 됨
  return <header>
    <h1><a href="/">WEB</a></h1>
  </header>
}
function Nav(){
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></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;

component 언제 만들면 좋을까?

1. 반복적인 html 축약할 때
2. 큰 페이지들 나누기
3. 자주 변경되는 것들

참고로 App() 처럼 대문자로 시작되는거 있으면 다 컴포넌트임 ㅋㅋ

component 단점

state 가져다 쓸 때 문제 생김. 다른 function에 있는 state는 사용하지 못함..