[React] 함수형 컴포넌트

 

 

 

 

---

 

 

 

 

함수형 컴포넌트는 class형 컴포넌트와 달리 아래와 같은 특징이 있다.

1. state가 없다.

2. 생명주기 함수를 사용할 수 없으며 hook을 이용한다.

3. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용한다.

4. render() 함수가 없으므로 return을 사용하여 화면을 그려준다.

 

 

◽ 함수형 컴포넌트 사용하기

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

function App() {
  return (
   <div>
     <h1>React</h1>
     <ChildComp contents="[이건 함수형 컴포넌트!]" />
   </div>
  );
}

export default App;

import React from "react";

function ChildComp(props) {
  let { contents } = props
  return (
    <h2>{ contents }</h2>
  )
}

export default ChildComp

 

 

💡 Tip

함수형 컴포넌트를 사용하면 좋은 예는 아래와 같다.
1. 반복적인 html 축약할 떄
2. 큰 페이지들
3. 자주 변경되는 것들

 

 

 

---

 

 

 

함수형 컴포넌트에서는 생명주기 함수를 사용할 수 없는 대신 hook을 사용한다.

대표적인 hook으로 useState()와 useEffect()가 있다.

 

◽ hook 사용하기

예제 1.

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

function App() {
  return (
   <div>
     <h1>React</h1>
     <ChildComp />
   </div>
  );
}

export default App;

import React, {useEffect, useState} from "react";

function ChildComp(props) {
  // useState(): state 변수를 선언 및 할당한다.
  // 첫번째 인자는 state 변수 명, 두번째 인가는 state 변수명을 변경해주는 함수이다.
  // []: JS의 디스트럭쳐링 문법이라고 한다. ex) let num = [1, 2], let [a, b] = [1, 2]
  const [ contents, setContents ] = useState('This is React')

  // useEffect(): 생명주기 함수인 componentDidMount()와 비슷하다.
  // return 되는 html 코드들이 화면에 그려진 이후에 실행된다.
  // 최초 페이지가 로딩될 때 한 번 실행되고 setContents() 함수로 state 값이 변경되면 한번 더 실행된다.
  useEffect(() => {
    console.log('in useEffect()');
  })

  return (
      <div>
        <h2>{ contents }</h2>
        <button onClick={() => setContents('This is hook')}></button>
      </div>
  )
}

export default ChildComp

 

예제 2.

import './App.css';
import {useState} from "react";

function App() {
  let [title, setTitle] = useState(['테스트1','테스트2', '테스트3'])
  let [likeCount, setLikeCount] = useState(0)

  function updateCount() {
    setLikeCount(likeCount++)
  }

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className="list">
        <h4>{title[0]}<span onClick={ updateCount }>👍🏻</span>{likeCount}</h4>
        <p>2022-08-29</p>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <p>2022-08-29</p>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <p>2022-08-29</p>
      </div>
    </div>
  );
}

export default App;

 

 

◽ state의 특징

1. state를 쓰던 html은 자동으로 재렌더링이 된다.

2. state는 자주 변경될 것 같은 html 요소처럼 변경사항을 바로 반영하고 싶을 때 state를 사용한다.

 

 

 

---

 

◽ 컴포넌트를 생성하는 방법 2가지

// 생성 방법 1.
function Child() {
  return (
      <div>자식 컴포넌트입니다.</div>
  )
}

// 생성 방법 2.
let child = function() {
  return (
      <div>자식 컴포넌트입니다.</div>
  )
}

 

 

---

 

출처

이정열, 초보자를 위한 리액트 200제 (정보문화사, 2021)