functional component

function Food({ name, picture }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );

class component

class App extends Component {
 render(){
   return (
     <div className="App">
     Hello, React !!
     <Subject/> //다른컴포넌트 불러오기
     <Food/>
     <Content> //코드자체가 정리정돈된다.
     </div>
     );
 }
}

함수형 컴포넌트 vs 클래스형 컴포넌트

Functional

• 함수형은 jsx 형태로 return 한다는것 이외에는 다른함수들과 비슷하다.
• 함수형은 클래스형보다 선헌하기가 편하고 메모리 자원을 덜 사용한다.
• state와 lifecyle기능을 사용할수 없었지만 v16.8이후 Hooks를 이용하면서 해결되었다.

Class

• 클래스형은 state값을 가질 수 있는 컴포넌트이다. state란 보통 우리가 동적 데이터(변하는 데이터, 존재하지않는데이터)와 함께 작업할 때 만들어진다.
• 클래스형은 react.component의 자식 instance로서 내장되어있는 메소드들을 사용할 수 있다.
  constructor()가 가장먼저 실행되고 render()도 자동적으로 실행된다.
  렌더링된 후에는 componentDidUpdate()가 실행되고,
  state값이 수정된 후에는 componentDidUpdate()가 lifecyle에 의해서 자동적으로 실행된다.