[개념] 함수형 컴포넌트

함수형 콤포넌트란?
function 키워드나 화살표를 사용하여 컴포넌트를 정의한다. 예전에는 props(렌더링할 데이터)를 전달받아서 화면에 렌더링만 하는 경우 사용하였다. 최근에 리액트 훅(react hook)이 등장하면서 함수형 컴포넌트에서도 상태(state)관리를 할 수 있게 되었다. 즉, 이제는 함수형 컴포넌트에서도 state(데이터)를 변경할 수 있다.

💜 함수형 컴포넌트의 기본구조 💜

위에서 제시한 Person 컴포넌트를 함수형으로 만들면 아래와 같다. 일반적인 함수 선언과 동일하다. function 키워드를 사용하고, 컴포넌트 이름(함수명)의 첫글자는 대문자로 작성하였다. HTML 템플릿을 리턴한다. 클래스형 컴포넌트의 render 함수와 유사하다. export 키워드를 사용하여 외부에서 Person 컴포넌트를 사용할 수 있도록 한다.

import React from "react";

function Person() {
    const name='Jess'
    const age=99

    return (
        <>
            <h3>{name}</h3>
            <h4>{age}</h4>
        </>
    )
}

export default Person;

Props 를 상속받는 경우는 아래와 같이 작성하면 된다.

import React from "react";

function Person(props) {
    const name='Jess'
    const age=99

    return (
        <>
            <h3>{props.name}</h3>
            <h4>{props.age}</h4>
        </>
    )
}

export default Person;

함수의 파라미터로 props 객체가 전달된다.

함수형 컴포넌트에서 props 에 접근하는 경우 this 키워드는 필요없다.

함수형 함수로 함수형 컴포넌트를 선언할 수도 있다. function 키워드를 사용한 것과 완전히 동일하지는 않다.

이유는 두 경우 this 의 의미가 달라지기 때문이다.

import React from "react";

const Person =(props) =>{
    return (
        <>
            <h3>{props.name}</h3>
            <h4>{props.age}</h4>
        </>
    )
} 
export default Person;

props 피라미터를 사용하는 대신 비구조화 할당 (destructuring) 문법을 사용해서 곧바로 props 값을 조회할 수도 있다.

import React from "react";

function Person({name, age}) {
    return (
    <>
        <h3>{name}</h3>
        <h4>{age}</h4>
    </>
    )
}

export default Person;

💜 함수형 컴포넌트 사용 💜

import React from "react";
import Person from './Person';

class App extends Comment {
    render () {
        return <Person name="Jess" age="99"></Person>
    }
}

export default App;

사용방법은 클래스형 컴포넌트와 동일하다. App 컴포넌트에서 Person 컴포넌트를 가져온 다음 render 함수에서 렌더링하면 된다.

props로 name 과 age 속성을 Persom 컴포넌트 내부로 전달한다.

컴포넌트 내부에서 props 데이터를 조회할 수 있다.

💜 함수형 컴포넌트 실습 예제 💜

import React from "react";

function Todo({ user, name, done, description}){
    return (
        <>
            <h2>user: {user}</h2>
            <h3>name: {name}</h3>
            <h4>done: {done? "finished":"ongoing"}</h4>
            <p>description: {description}</p>
        </>
    )
}

export default Todo;

props 로 전달받은 사용자정보(user)와 할일 정보(name, done, description)를 이용하여 웹 화면에 랜더링한다.

import React,{ Component } from "react";
import Todo from './Todo';

class Todo extends Component {
    render() {
        return <Todo user="Jess" name ="cleaning" done="false" description ="leaning my room on weekends"></Todo> 
    }
}

export default App;

App 컴포넌트에서 Todo 컴포넌트를 가져온 다음 render 함수에서 렌더링 해보자.

Todo 컴포넌트 내부로 user, name, done, description 속성을 props로 전달한다.