React.js 기본 사용법(2) - Component, props

이번 포스트에서는 Component와 props의 사용법에 대해 알아본다.

 

1. Component

컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트가 있다.

 

함수형 컴포넌트

• state, lifeCycle 관련 기능 사용 불가능 (react-hook을 통해 해결됨)
• 메모리 자원을 덜 사용함
• 컴포넌트 선언이 편리함

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

클래스형 컴포넌트

• class 선언 필요
• Component로 상속을 받음
• render() 메소드가 반드시 필요
• state, lifeCycle 관련 기능 사용 가능
• 임의의 메소드를 정의 가능

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

 

개인적으로 함수형을 먼저 접해서 그런지는 몰라도 더 편하게 다가온다.

기능적으로도 함수형이 더 편한 것이 사실이고, state와 같은 기능이 hook을 통해 사용 가능해졌기 때문에 함수형이 더 편리하지 않나 싶은 것이 개인적인 의견이다.

 

2. props

props는 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있다. 함수의 인자로 생각하면 편하다.

다만, 읽기 전용으로 값을 수정할 수 없다는 특징을 가지고 있다.

 

아래 코드를 통해 Component와 props 사용 방법을 살펴본다.

 

App.js

// App.js

import React from 'react';
import Welcome from './Welcome';

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

Welcome.js

// Welcome.js

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome 파일을 App.js에 가져와 선언하고 return될 때 사용한다. 이게 기본적인 Component 사용법이다.

그리고 Welcome 컴포넌트에 name=""을 통해 넘기고자 하는 이름값을 전달한다. 그러면, Welcome.js에서 props를 통해 넘겨받은 이름값을 보여준다.

 

예외로, 컴포넌트에 props를 지정하지 않았을 경우 아래 코드와 같이 default 값도 설정할 수 있다.

import React from 'react';

function Hello({ name }) {
  return <div>환영합니다, {name}</div>
}

Hello.defaultProps = {
  name: '고객님'
}

export default Hello;

 

---

 

다음 포스트에서는 react-hook에 대해 알아본다.