[React] 2. 컴포넌트

컴포넌트 개발에 앞서 개념을 간단히 설명해보자. 이전에 우리는 html로 다음과 같이 코딩을 할 수 있었다.

<html>
  <body>
    <header>
      <h1>WEB></h1>
      world wide web!
    </header>
    
    <nav>
      <ul>
        <li><a href="1.html">HTML</a></li>
      </ul>
    </nav>
   
  </body>
</html>

하지만 만약 저 header부분의 코드가 1000만 줄이라면? 저걸 다 index.html 파일에 넣어버리면 난잡하고 보기 어려워 지겠지? 그래서 이것을 일종의 치환을 해준다. <header>~</header>부분의 코드를 예를 들면 <Subject></Subject> 태그 한 줄로 치환을 해주는 것이다.

App.js 파일을 열어 다음과 같이 class 를 선언해준다.

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

그리고 아래에 있는 App class 코드를 다음과 같이 바꿔주면!

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

npm start를 통해 localhost:3000을 열어 확인해보자!

F12를 눌러 개발자창으로 확인해봐도 아주 잘 적용되었음을 알 수가 있당

*참고로 위 언어는 javascript가 아니다. 태그를 그대로 쓰고 있기 때문! 이 언어를 jsx라고 말한다.

우리가 jsx로 코딩을 하면 이 create-react-app이 알아서 javascript로 변환해준다.

자, 이렇게 컴포넌트에 대해 알아봤다. 하지만 우리는 한 발짝 더 나아가

이런식으로 지정해서 Subject라는 컴포넌트를 보다 많은 상황에서 다양하게 재사용하고 싶을 수 있다.

이런게 가능해진다면 우리는 저 텍스트가 아니라 다른 텍스트라도 같은 서식으로 편하게 만들 수 있을 것이다.

class Subject extends Component{
  render(){
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
      </div>
    );
  }
}

이렇게 Subject 태그 안에 텍스트가 들어갈 자리에 {this.props.'이름'} 을 지정해주면, 앞에서 말한 방식의 코딩이 가능해진다!

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟤:𝑅𝑒𝒶𝒸𝓉' 카테고리의 다른 글

[React] 1. 리액트란? + 개발 환경 설정 (0)	2020.12.31

𝒪𝒹𝑒𝓃𝑔'𝓈 𝒮𝓉𝓊𝒹𝓎𝑅𝑜𝑜𝓂

[React] 2. 컴포넌트

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟤:𝑅𝑒𝒶𝒸𝓉' 카테고리의 다른 글

티스토리툴바

[React] 2. 컴포넌트

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟤:𝑅𝑒𝒶𝒸𝓉' 카테고리의 다른 글

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹/𝓡𝟥𝟢𝟤:𝑅𝑒𝒶𝒸𝓉' Related Articles

티스토리툴바