React | 4. React Component, Props, State

 

 

1. Component

리액트는 컴포넌트로 이루어져있다.

컴포넌트에서 시작해서 컴포넌트로 끝난다.

UI요소들을 조각조각 컴포넌트화 시켜서 유지보수가 용이하게 하는 것이다.

 

import React, { Component } from 'react';
import JS파일이름 from './JS파일이름';

class App extends Component{
  render() {
    return(
      <div className="App">
        <JS파일이름 />
      </div>
    );
  }
}

export default App;

이러한 형식으로 컴포넌트를 만들고 불러온다.

 

 

import React, { Component } from 'react';

class Comp1 extends Component{
  render() {
    return(
      <div>
          <Comp2 /> //이런 식으로 같은 파일내에서도 컴포넌트를 부를 수 있음.
          <h1>Hello World!</h1>
      </div> 
    );
  }
}

class Comp2 extends Component {
    render(){
        return(
            <h2>Hi I'm Comp2</h2>
        );
    }
}


export default Movie;

 

※ 컴포넌트의 이름은 항상 대문자로 시작한다.

React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리하기 때문이다.

 

 

2. Props

Props는 속성을 나타내는 데이터이다.

Component와 Component 사이를 지나는 데이터라 정의할 수 있다.

     부모                자식 

Prop와 Component는 arguments와 function과 비슷한 개념이다.