[리액트(React)] 5. 컴포넌트(Component) - 함수

다시 처음 화면으로 돌아왔다. 이번엔 함수형 컴포넌트를 공부해보자

리액트에서 처음 함수형 컴포넌트를 사용하게 하는 목적은 단순한 정적인 화면을 쉽게 렌더링 하는 것이었다.

그래서 클래스 컴포넌트처럼 기본 기능에 state관리나 lifecyle메서드들이 없다.

React 버전 16.8부터 함수형 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있도록 React Hook을 새로 추가했다.

 

다음 장엔 React Hook을 이용해서 함수형 컴포넌트를 구현해보고

이번 장에서는 Hook 이전의 기능만 가지고 정적인 렌더링을 해보자

---

함수 컴포넌트

- 기본적인 함수 컴포넌트에서는 props만을 전달하는 정적인 렌더링만 가능

// App.js
import React from 'react';
import './App.css'
import Greeting from './components/greeting'

function App(props) {
    return (
      <Greeting name="2HS" job="Student"/>
    );
}

export default App

 

- 함수이므로 this를 쓰지 않고 클래스 컴포넌트에 있던 함수 선언에 const를 붙여줘야 한다!

// components/greeting.jsx
import React from 'react';

function Greeting(props) {

  const greet = () => {
    console.log('인사!')
  }

    return (
      <div>
        <h1>이름 : {props.name}</h1>
        <h1>직업 : {props.job}</h1>
        <h1>인사 횟수 : 0</h1>
        <button onClick={greet}>인사하기</button>
      </div>
    );
}

export default Greeting;

 

다음 장에서는 Hook을 이용한 state관리 등 전반적인 React Hook에 관련해서 공부해보자