210318 개발일지(101일차) - React에서 Component와 Props는?

Component

리액트에서 컴퍼넌트는 함수 컴퍼넌트와 클래스 컴퍼넌트로 나눌 수 있다.
말 그대로 함수와 클래스로 컴퍼넌트를 각각 나타내는 것이다.

컴퍼넌트의 이름은 항상 대문자로 시작해야 한다.
이유는 아래와 같다. (출처 : 리액트 공식페이지)

Function Component

정적인 Component 관리 가능(16.8부터는 React Hook을 이용해서 동적으로 관리 가능)
※ Class가 어려워서 Function에 React Hook을 도입함(Class와 같은 기능)

Class Component

state, render로 정적(state)이고 동적(render)인 Component관리 가능

Props

props는 Immutable Data로, 변하지 않는 데이터다. 보통 상위(부모) 컴퍼넌트에서 하위(자식) 컴퍼넌트로 데이터를 넘겨줄 때 사용한다.

예를 들어, index.js → app.jsx → welcome.jsx 흐름대로 부모, 자식 관계라고 생각하면 된다.
아래와 같은 코드는 이런 화면을 나타내게 된다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// app.jsx
import Welcome from './components/welcome';

function App() {
  return  (
  <div>
    <Welcome name ="gojae" />
  </div>
  );
}

export default App;

//welcome.jsx
import React, { Component } from 'react';
class Welcome extends Component {
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
            </div>
        );
    }
}

export default Welcome;