6.React 함수형 컴포넌트 완전 정복: 간단하고 효율적인 UI 구성

"React 함수형 컴포넌트 완전 정복: 간단하고 효율적인 UI 구성"

---

1시간 분량 강의안 (Functional Components 기초)

강의 목표

1. 함수형 컴포넌트의 개념과 특징을 이해한다.
2. 함수형 컴포넌트를 사용하여 React 애플리케이션을 작성하는 방법을 학습한다.
3. useState와 useEffect를 활용해 동적인 UI를 구현한다.

---

강의 목차

---

1. React 함수형 컴포넌트란? (10분)

함수형 컴포넌트의 정의

• 함수형 컴포넌트는 JavaScript 함수로 정의되는 React 컴포넌트입니다.
• 클래스형 컴포넌트와 달리 React의 Component를 상속받지 않으며, 단순한 함수로 동작합니다.

함수형 컴포넌트의 특징

1. 간결함: 구조가 간단하며, 코드 작성이 쉬움.
2. 무상태 (Stateless): 초기에는 상태를 관리하지 않았으나, React Hooks 도입 이후 상태와 생명주기를 관리할 수 있게 됨.
3. 성능 최적화: 클래스형 컴포넌트보다 메모리 사용량이 적고 렌더링 속도가 빠름.

함수형 컴포넌트와 클래스형 컴포넌트 비교

특징함수형 컴포넌트클래스형 컴포넌트

작성 방식	JavaScript 함수	React.Component를 상속받는 클래스
상태 관리	useState Hook 사용	this.state 사용
라이프사이클 관리	useEffect Hook 사용	라이프사이클 메서드 사용
코드 가독성	간결하고 직관적	상대적으로 복잡

 

---

2. 함수형 컴포넌트 작성하기 (20분)

1단계: 기본 함수형 컴포넌트 작성

1. React 함수형 컴포넌트는 단순한 함수를 반환합니다.

   // src/components/greeting.js
   
   function Greeting() {
     return <h1>Hello, React!</h1>;
   }
   
   export default Greeting;

2. Greeting 컴포넌트를 App 컴포넌트에서 사용:
    

// src/App.js

import React from 'react';
import Greeting from './greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

2단계: Props 사용하기

• Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. 
  • 결과: Hello, React!

• function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  
  function App() {
    return <Greeting name="React" />;
  }
  
  export default App;

3단계: State 사용하기 (React Hooks)

• useState Hook을 사용해 상태를 관리합니다. 
  • 버튼 클릭 시 count 값이 증가합니다.

• // src/components/counter.js
  
  import React, { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>현재 카운트: {count}</p>
        <button onClick={() => setCount(count + 1)}>증가</button>
      </div>
    );
  }
  
  export default Counter;

 

'증가'버튼 클릭에 따라 현재 카운트 값이 증가되는 모습

 

 

---

3. 함수형 컴포넌트에서 생명주기 관리 (15분)

useEffect Hook 사용

1. 컴포넌트가 마운트될 때 실행:

   // src/App.js
   
   import React, { useEffect } from 'react';
   
   function App() {
     useEffect(() => {
       console.log("컴포넌트가 마운트되었습니다.");
     }, []);
   
     return <h1>Hello, React!</h1>;
   }
   
   export default App;

   
2. State 변경 시 실행:

   // src/components/counter.js
   
   import React, { useState, useEffect } from 'react';
   
   function Counter() {
     const [count, setCount] = useState(0);
   
     useEffect(() => {
       console.log(`카운트가 ${count}로 변경되었습니다.`);
     }, [count]);
   
     return (
       <div>
         <p>현재 카운트: {count}</p>
         <button onClick={() => setCount(count + 1)}>증가</button>
       </div>
     );
   }
   
   export default Counter;

 

3. 컴포넌트가 언마운트될 때 실행:

useEffect(() => {
  const interval = setInterval(() => {
    console.log("타이머 동작 중");
  }, 1000);

  return () => {
    clearInterval(interval);
    console.log("컴포넌트가 언마운트되었습니다.");
  };
}, []);

 

 

타이머 동작

---

4. 실습 과제 (10분)

실습 과제

1. 사용자 입력을 받아 "안녕하세요, [사용자 이름]" 메시지를 표시하는 함수형 컴포넌트를 작성하세요.
2. 버튼 클릭 시 카운트를 증가시키고, 10 이상이 되면 "최대 카운트 도달" 메시지를 표시하세요.

예제

• 실습 1번의 예제:

// src/components/greeting.js

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        placeholder="이름을 입력하세요"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <h1>안녕하세요, {name}!</h1>
    </div>
  );
}

export default Greeting;

초기화면

 

 

---

실습과제 2번 완성 모습

 

실습과제 2번 실행 모습

 

5. Q&A 및 정리 (10분)

• Q&A:
  1. 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 사용해야 할까요?
  2. useEffect의 의존성 배열은 어떻게 작동하나요?
• 요약:
  • 함수형 컴포넌트는 React에서 가장 권장되는 방식입니다.
  • useState와 useEffect를 사용해 상태와 생명주기를 관리할 수 있습니다.
  • 간결한 구조로 컴포넌트를 작성하여 생산성을 높일 수 있습니다.