TIL31.Component

기존의 html문법과 jsx문법 차이점에 유의하자.

component의 형태

• 컴퍼넌트에는 두가지 타입이 있는데, 하나는 class component, 나머지 하나는 function component이다. 초기에는 클래스 컴포넌트에 집중해보자.
• 리액트에서는 jsx문법을 사용한다.
  -class의 이름은 대문자로 작성한다. ex) Class App extends Component
  -컴퍼넌트를 만들때는 반드시 하나의 최상위 태그를 만들어야한다. 'Fragment'를 사용하면, DOM에 별도 노드를 추가하지 않아도 자식목록을 그룹화할 수 있다. 요소들을 감싸는 div태그의 불필요한 생성을 막을 수 있다.
  -html의 class는 react에서 className으로 작성해야한다.

//기존의 태그를 사용해서 요소를 감싸준 경우.
<div>
	<p> Hello world</p>
    <p> Hi, Mong</p>
<div>

//Fragment를 사용해서 요소를 감싸준 경우.
<Fragment>
	 <p> Hello world</p>
     <p> Hi, Mong</p>
</Fragment>

class App extends Component {
  render() { 
    return ( 
     <div className="App">
       <P>Hello, React!</p>
       <img src="www.react.com" />	//<img />의 형태로 작성.
     </div> 
     );
  }
}

p태크와 img태그를 리턴하는 App이라는 이름의 '클래스 컴포넌트'를 만든다. 그 클래스는 render라는 메소드를 가지고 있는데, 이때 render는 웹 브라우저에 만들고자 하는 것들을 나타낸다.

import from/export default

import React from 'react';
react.js에서 'react' 코드를 가져오겠다는 의미이다.
export default TOC;
변수,함수,오브젝트,클래스 등을 내보낼 수 있는 명령어이다.