[React] Component 생성하기

devCecy·2020년 11월 28일
0

React

목록 보기
2/14
post-thumbnail

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>
    )
  }
}
  1. 같은 app.js파일에 위에서 생성한 Component들을 담아줄 기본 Component를 만들어 그 안에 <Class명></class명>형태로 담아준다.
  2. 기본 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;
  1. React Component를 사용한 페이지 완성!

component는 왜 만들어야 할까?

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

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

profile
🌈그림으로 기록하는 개발자🌈

0개의 댓글