1:React 컴포넌트의 모든 것: UI를 구성하는 기본 단위

강의 목표

• React 컴포넌트의 개념과 역할을 이해한다.
• 함수형 컴포넌트와 클래스형 컴포넌트를 비교하며 학습한다.
• React 컴포넌트를 활용해 간단한 UI를 구현한다.

  

 

강의 목차
1. React 컴포넌트란? (15분)

컴포넌트의 정의

• React 컴포넌트는 UI의 독립적이고 재사용 가능한 단위입니다.
• 컴포넌트는 JavaScript 함수 또는 클래스 형태로 정의됩니다.
• React 애플리케이션은 컴포넌트 트리를 통해 UI를 구성합니다.

React 컴포넌트의 역할

• UI 렌더링: 컴포넌트는 특정 상태에 따라 화면에 표시될 UI를 정의합니다.
• 재사용성: 동일한 컴포넌트를 여러 번 사용할 수 있어 코드를 효율적으로 관리할 수 있습니다.
• 상태 관리: 컴포넌트는 상태(State)와 속성(Props)을 통해 동적인 UI를 생성합니다.

2. React 컴포넌트 만들기 (15분)

1단계: 함수형 컴포넌트
함수형 컴포넌트는 간단하게 JavaScript 함수로 정의됩니다.

 

예제:

어플리케이션 생성

npx create-react-app component_demo

최종 파일 구조

project-directory/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── Greeting.js  // Greeting 컴포넌트 (함수형 및 클래스형 버전 포함)
│   │   ├── Counter.js   // Counter 컴포넌트
│   │   └── InputGreeting.js // 이름을 입력받아 실시간 반영하는 컴포넌트
│   ├── App.js          // 메인 App 컴포넌트
│   ├── index.js        // ReactDOM.render 호출 및 진입 파일
│   └── styles/
│       └── App.css     // 스타일 파일 (선택 사항)
├── package.json
└── README.md

// ./src/components/Greeting.js

function Greeting() {
return <h1>Hello, React!</h1>;
}

export default Greeting;

 

src/components 폴더 생성후, Greeting.js 파일 생성

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

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

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

export default App;

어플리케이션 실행

npm start

2단계: 클래스형 컴포넌트
클래스형 컴포넌트는 React의 Component를 상속하여 정의합니다.
예제:

// ./src/components/Greeting.js

import React, { Component } from 'react';

class Greeting extends Component {
render() {
return <h1>Hello, React!</h1>;
}
}

export default Greeting;

• 함수형 컴포넌트 vs 클래스형 컴포넌트
• 항목 함수형 컴포넌트 클래스형 컴포넌트
• 작성 방식 함수로 정의 클래스로 정의
• 상태 관리 useState Hook 사용 this.state로 상태 관리
• 라이프사이클 useEffect Hook 사용 라이프사이클 메서드 사용 (componentDidMount)

3. Props와 State 이해하기 (20분)

Props (속성)
Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.
읽기 전용 데이터로, 자식 컴포넌트에서 수정할 수 없습니다.
예제:

// ./src/components/Greeting.js
import React, { Component } from 'react';

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

export default Greeting;

// ./src/App.js

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

function App() {
	return <Greeting name="React" />;
}

export default App;

결과: Hello, React!

State (상태)
State는 컴포넌트 내부에서 관리되는 동적인 데이터입니다.
예제:

// ./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;

// ./src/App.js

import React from 'react';
import Counter from './components/Counter';

function App() {
	return <Counter />;
}

export default App;

버튼을 클릭할 때마다 count 값이 증가합니다.

초기화면

'증가'버튼을 한번 클릭하였을때 count값이 증가된 모습

4. React 컴포넌트 실습 (10분)

실습 과제
함수형 컴포넌트를 사용하여 "Hello, [사용자 이름]" 메시지를 표시하는 컴포넌트를 만드세요.
상태(State)를 사용하여 카운터 기능을 구현하세요.
예제
이름을 입력하면 화면에 실시간으로 반영되는 컴포넌트:

// ./src/components/InputGreeting.js

import React, { useState } from 'react';

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

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

export default InputGreeting;

// ./src/App.js

import React from 'react';
import InputGreeting from './components/InputGreeting';

function App() {
	return <InputGreeting />;
}

export default App;

초기 화면

값을 입력받은 후, 실시간으로 출력되는 모습

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

Q&A:

1. 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 선택해야 하나요?
2. Props와 State의 차이는 무엇인가요?

요약:

• React 컴포넌트는 UI를 구성하는 기본 단위입니다.
• 함수형 컴포넌트는 간결하고 최신 React에서 권장되는 방식입니다.
• Props는 부모에서 자식으로 데이터를 전달하고, State는 컴포넌트 내부에서 관리됩니다.