태야

1. Function Component & Class Component

// 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환한다.

// 클래스형 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ES6 Class를 사용해 컴포넌트를 정의하면 된다.

- 함수형에서 클래스형 컴포넌트로 바꾸기

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.

2. render()라고 불리는 빈 메서드를 추가합니다.

3. 함수의 내용을 render() 메서드 안으로 옮깁니다.

4. render() 내용 안에 있는 props를 this.props로 변경합니다.

※ 주의

사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다.

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달된다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킨다고 한다.

2. Props

props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

App.js

// APP.js
import React, { Component } from 'react'
import Subject from './components/Subject'; //컴포넌트 import
import Content from './components/Content'; //컴포넌트 import


class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="Wold Wide Web!" /> // props 전달
        리액트 공부하기!
        <Content title="HTML" desc="HTML is ..." /> // props 전달
      </div>
    );
  }
}

export default App;

하위 컴포넌트에 전달할 데이터를 props로 전달한다. 여기선 <Subject>, <Content> 각 컴포넌트에 porps를 전달해줬다.

Subject.js

// Subject.js
import React, { Component } from 'react'

export default class Subject extends Component {
  render() {
    console.log('Subject render!');
    return (
      <header>
        <h1>{this.props.title}</h1> // 전달받은 props를 사용해 렌더링한다.
        {this.props.sub}
      </header>
    )
  }
}

Content.js

// Content.js
import React, { Component } from 'react'

export default class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2> // 전달받은 props를 사용해 렌더링한다.
        {this.props.desc}
      </article>
    )
  }
}

전달받은 props를 사용할 때는 현재 Class를 가리키는 this를 사용한다.

this.props.(전달받은 props 명) 형식으로 중괄호와 함께 사용해주면 받은 데이터를 렌더링 할 수 있게 된다.

- 결과 화면