TIL React #18 - 3.20

Component의 개념:

• Javascript를 통해서 사용하다보면 각 태그마다 엄청많은 양의 코드가 들어갈 수 있다.
• 협업을 한다고 하면 동료들에게 가독성이 떨어질 수 있고 개인에게도 나중에 원하는 코드를 찾고 싶을 때 찾기 힘들다.
• 그래서! Component, 즉 사용자에게 보여질 UI(화면)을 잘개 독립적인 형태로 쪼개어서 가독성이 뛰어나게 만든게 Component의 역할

즉, Component는 정리정돈을 잘 시켜주는 도구라고 보면 되겠다.

예제)

class Subject extends React.Component{
  render() {
    return (
      <header>
        <h1> WEB!</h1>
         "WorldWide Web"
      </header>
    );
  }
}

class TOC extends React.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 React.Component {
  render(){
    return(
      <article>
        <h2>HTML</h2>
        HTML is a HyperText MarkUp
      </article>
    );
  }
}



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

}

export default App;

Component 파일로 분리하기: App.js 안에다가 너무많은 component를 만들면 필요한 컴포넌트를 빨리 찾기가 쉽지않다. 그리고 외부에서도 파일을 쓰기하기 위해서는 Components용 디렉토리를 따로 만들고 운영하면 좋다.

Props란 그러면 무엇일까? 저렇게 class Subject를 한번 선언하고 안에 있는 내용을 바꿀 수 없다면 재사용성이 떨어진다. 그렇기 때문에, 재사용성을 높여주기 위해 원하는 class 안에 {this.props.'태그안에 선언할 변수명'}을 넣어주고 export할 class에 원하는 값들을 선언하면 된다!

Component 파일로 분리하기