[생활코딩 / React] 11. 컴포넌트

참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

이 강의는 예전에 듣고 한 번 더 듣는 거라 앞의 설치과정이나 기본 내용들은 뛰어넘었다!

1.  컴포넌트 만들기 1

---

 

현재 상황

class Subject extends Component {
  render() {
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
      </header>
    );
  }
}

👉🏻다음과 같이 Subject라는 class를 만들어준다. class에는 render 함수가 꼭 필요하다.

👉🏻JS 최신 문법은 function을 명시하지 않아도 return을 보고 함수임을 알 수 있다. return 안의 html 코드에서는 하나의 최상위 tag만 써야 한다.

✍🏻return 안에 들어있는 내용은 JS문법이 아니다. return 안에 tag를 사용하려면 큰 따옴표와 함께 사용해야 하는데 이는 굉장히 귀찮은 일이다. 그 때문에 페이스북이 이를 보완하기 위해 새롭게 만든 JSX문법이다. 이 JSX 문법을 create react app이 JS 문법으로 자동으로 converting해준다.

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

👉🏻그리고 App class에 Subject class를 넣어준다.

👉🏻npm start 명령어를 사용하면 다음과 같은 결과가 나온다! Subject class에 담긴 내용이 출력된다.

 

2.  컴포넌트 만들기2

---

현재 상황

pure.html에 있는 나머지 nav, article tag들도 컴포넌트로 만들어보자!

class TOC extends Component{
  render () {
    return (
      <nav>
          <ul>
              <li><a href="1.html">HTML</a></li>
              <li><a href="2.html">CSS</a></li>
              <li><a href="3.html">JavaScript</a></li>
          </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render () {
    return (
      <article>
          <h2>HTML</h2>
          HTML is Hyper Text Markup Language.
      </article>
    );
  }
}

👉🏻다음과 같이 컴포넌트를 만드는 코드를 추가한다.

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

👉🏻TOC class와 Content class를 추가한다.

👉🏻다음과 같이 내용이 추가된다.

최종 코드

👉🏻최종적인 코드에서 pure.html의 코드와 App class의 코드를 비교해보자. 같은 결과물이어도 App class의 코드가 훨씬 간결하다는 것을 확인할 수 있다. 즉 여기서 Component는 정리정돈의 도구라고 생각해도 좋다.