[React 따라하기 #6] React Components(컴포넌트)

React Component 파보기

 

Class Component 와 function Component 가 있습니다.

예를 들면, ReactDOM 으로 랜딩 시 

ReactDOM.render(<Car />, document.getElementById('root'));

여기서 <Car /> 를 class 로 만들거나 function 으로 만들수 있습니다.

class 로 생성 시

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

function 으로 생성 시

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

 

<Car /> 를 class 로 만들든 function 으로 만들든 결과는 같습니다.

하지만 Car 에 무엇인가 속성과 내부 메소드가 필요하다면 class 로 만드는게 더 좋겠죠.

 

state

React 에서는 컴포넌트의 속성들은 state 라고 불리는 오브젝트에 보관해야 합니다.

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red", type: "SUV"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

// 출력 : I am a red Car! 

 

이렇게 state 를 통해 저장할 수 있고,

아래와 같이 prop 을 통해 값을 전달할 수 있습니다.

prop

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

// 마지막 줄의 <Car color="red" /> 의 color 가 prop 값입니다.
// 출력 : I am a red Car! 

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

 

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #8] React Props

2019/12/31 - [HTML,Javascript] - [React 따라하기 #9] React State

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)

2020/01/02 - [HTML,Javascript] - [React 따라하기 #11] React Event 리액트 이벤트