Component

Component는 재사용 가능한 UI의 단위이다.

Component의 기본 구조

Component는 class 형 혹은 함수 형으로 만들 수 있다.
(본 글에서는 class형 사용!)

class형

• 컴포넌트명(클래스명)은 대문자로 시작해야한다.
• component에 들어갈 코드에는 하나 이상의 최상위 태그가 포함되어야한다. 아래는 최상위 태그 예시로 <div>태그를 넣어주었다.
• render() 메서드는 필수다.

class 컴포넌트명 extends Component{ 
	render(){
      return(
        <div>
        컴포넌트 안에 담고자 하는 코드 
          </div>
        );
	}
}

함수형

function 컴포넌트명 (props) {
  return <div>컴포넌트 안에 담고자 하는 코드 </div>;
}

Component 생성

1. app.js 파일에 위의 기본 구조를 따라 Component를 생성해준다.
   나는 아래와 같이 Subject,TOC,Content라는 class명을 가진 Component 3개 만들어 주었다.

// 1. Subject
class Subject extends Component {
  render(){
    return (
      <header>  
        <h1>Web</h1>
        world wide web
    </header>
    ); 
  }
}

// 2. TOC
class TOC extends Component{
  render(){
    return(
      <nav>
      <ul>
          <li>1234</li>
          <li>2</li>
          <li>3</li>
      </ul> 
  </nav>
    )
  }
}

// 3. Content
class Content extends Component {
  render(){
    return(
      <article>
      <h2>HTML</h2>
      HTML is Hypertext markup launguage
      </article>
    )
  }
}

2. 같은 app.js파일에 위에서 생성한 Component들을 담아줄 기본 Component를 만들어 그 안에 <Class명></class명>형태로 담아준다.
3. 기본 Components의 class명은 하단 export default App;의 Class명과 갖아야 한다.

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
  );
  }
}

export default App;

4. React Component를 사용한 페이지 완성!

component는 왜 만들어야 할까?

1. 코드의 가독성을 높여준다.
2. 코드의 재사용이 용이하다.
3. 유지보수에 탁월하다.

나의 결론, component는 정리정돈의 왕이다👑