리액트 공부하기 - 컴포넌트 만들기, 함수형 컴포넌트와 class 컴포넌트

 

어렵다 ..

꼬리에 꼬리를 무는 질문의 연속인 새 고ㅏ목

 

채찍피티.. 미안해. ... 

지피티 괴롭혀서 그나마 쉽게 정리할 수 있게 된 파트 🥹

---

 

1. 컴포넌트란?

2. 컴포넌트 만들기

3. 컴포넌트 종류

4. 함수형 컴포넌트와 클래스형 컴포넌트 차이

5. 클래스형 컴포넌트 < - > 함수형 서로 변환해보기

---

💡✨컴포넌트 ?

→ 리액트(React)에서 **컴포넌트(Component)**란 UI를 구성하는 독립적인 블록.

쉽게 말하면, 웹 페이지의 한 부분을 담당하는 재사용 가능한 코드 조각 !

 

→ 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다.

---

💡✨컴포넌트를 만들어보자

❶ 컴포넌트 정의하기

: 사용하고 싶은 컴포넌트를 만들기 위해 원하는 마크업을 추가 하기

* 리액트 컴포넌트 이름은, 대문자로 시작!

 

Introduce라는 컴포넌트를 만들어보겠습니다 -

export default function Introduce() {
	return (
	<>
		<p> 제 이름은 오즈코딩스쿨입니다. </p>
		<p> 만나서 반갑습니다! </p>
	</>
	);
}

 

 

❷컴포넌트 내보내기

: export default라는 접두사를 사용하면, 다른 파일에서 해당 컴포넌트를 가져올 수 있게 함.

다른 곳에서 사용할 준비 완료 !

 

1) 첫번째 방법 : 상단에 작성

export default function Introduce() { 
	return (
		// JSX 코드
	);
}

 

2) 두번째 방법 : 하단에 작성

function Introduce() {
	return (
		//  JSX 코드
	);
}

export default Introduce;$

 

 

❸ 컴포넌트 불러오기 

: import를 사용하여, My App 컴포넌트에 Introduce 컴포넌트 가져오기

import Introduce from './Introduce';

export default function MyApp() {
	return (
		// JSX 코드
	);
}

 

❹ 컴포넌트 중첩하기

: 선언한 Introduce 컴포넌트를 MyApp 컴포넌트 안에 중첩 시겨코비

import Introduce from './Introduce';

export default function MyApp() {
	return (
		<div>
			<h1> 오즈코딩스쿨에 오신 여러분 ! 환영합니다 </h1>
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
		</div>
	);
}

 

 

컴포넌트를 한 번 정의한 후에 원하는 곳에서 원하는만큼 자유롭게 사용할 수 있다는 점이 React의 가장 큰 장점 ✨

---

💡✨컴포넌트 종류

1) 클래스형 컴포넌트

import React, { Component } from "react";

export default class Class extends Component {
  render() {
    return <div>Class</div>;
  }
}

클래스형 컴포넌트는 render()메서드가 반드시 있어야 함. render()메서드 안에는 렌더링하고 싶은 JSX 를 반환하면 된다.

 

 

✓ 함수형 컴포넌트 기본 문법 

import React from "react";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

 

✓클래스형 컴포넌트 특징

- class로 정의 하는 컴포넌트

- render() 메서드 필수

- new 키워드로 하나의 객체 생성. (그 객체에는 this.state, this.props, this.setState() )같은 속성과 메서드가 포함)

- new 키워드로 만든 객체를 인스턴스라고 부르고 그 안에는 다양한 속성과 메서드 포함.

 

 

 

→ 이런 것이 함수형 컴포넌트와의 차이점이다. 함수형은 hook으로써 관리 한다.

 

---

2) 함수형 컴포넌트 (자주 사용, 권장 방식)

: 함수형 컴포넌트는 클래스형 컴포넌트에 비해 구조가 단순하고 코드도 빠르게 작성할 수 있다.

 또한 인스턴스 생성 과정이 없기 때문에 메모리 사용량이 줄어들고 렌더링 성능이 좋아진다.

또한 라이프 사이클 메서드를 사용하지 않고 여러가지 Hooks를 사용하여 상태관리를 더 쉽게 할 수 있다 !

 

 

✓ 함수형 컴포넌트 기본 문법 

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

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터)

객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트

이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭한다. 

 

import React, { useState } from "react";

const MyComponent = ({ name }) => {
  // useState 훅 사용 (state 선언)
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default MyComponent;

 

✓함수형 컴포넌트 특징

- function 또는 const로 정의할 수 있음.

- render() 함수 필요 없음! 그냥 JSX를 반환하면 됨.

- props는 함수의 매개변수로 바로 받을 수 있음. (({ name }))  ► this.props.name 대신 그냥 {name}을 사용하면 됌

- state는 useState 훅을 사용해서 간단하게 관리.

 

---

💡✨클래스형 컴포넌트와, 함수형 컴포넌트의 각 특성과 차이

 

1) 클래스형 컴포넌트의 특징

클래스형 컴포넌트는 여러종류의 라이프 사이클 메소드를 가지며 이 메소드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 합니다. 라이프 사이클은 크게 세단계로 나뉜다.

1. 생성시(Mount)
2. 업데이트시(Update)
3. 제거시(Unmount)

→ 이렇게 생명 주기가 있는 장점은 ?

역할이 분리되어 있음

마운트, 업데이트, 언마운트 단계별로 메서드가 정리되어 있어.

유지보수할 때 어떤 시점에 실행되는지 명확함.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    console.log('🍼 constructor: 태어날 준비');
  }

  componentDidMount() {
    console.log('👶 componentDidMount: 태어남');
  }

  shouldComponentUpdate() {
    console.log('🤔 shouldComponentUpdate: 업데이트 해도 돼?');
    return true;
  }

  componentDidUpdate() {
    console.log('🎉 componentDidUpdate: 업데이트 완료!');
  }

  componentWillUnmount() {
    console.log('💀 componentWillUnmount: 죽기 전 정리');
  }

  render() {
    console.log('🎨 render: 화면 그리기');
    return <h1>Hello</h1>;
  }
}

 

 

 

2) 함수형 컴포넌트 특징

:함수형 컴포넌트는 클래스형 컴포넌트에 비해 구조가 단순하고 코드도 빠르게 작성할 수 있음. 또한 인스턴스 생성 과정이 없기 때문에 메모리 사용량이 줄어들고 렌더링 성능이 좋아진다. 또한 라이프 사이클 메서드를 사용하지 않고 여러가지 Hooks를 사용하여 상태관리를 더 쉽게 할 수 있기 때문에, 함수형 컴포넌트 사용이 권장되고 있다 !

 

→ 함수형 컴포넌트에도 생명주기 개념은 있다 ! 
대신, useEffect 같은 Hook을 써서 구현함

import { useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("👶 태어났어요");

    return () => {
      console.log("💀 사라질 때 정리해요");
    };
  }, []); // 빈 배열이면 마운트/언마운트 시만 실행됨

  return <h1>Hello</h1>;
}

 

마운트: useEffect 실행

언마운트: return 안 함수 실행

업데이트: useEffect에 dependency 추가하면 됨

 

 

클래스형은 인스턴스 내에서, 다양한 프로퍼티와 메서드를 사용해야 함에 비해 (작성할게 많음),

함수형은 보다 간단하다는 이러한 차이가 있다.

 

---

 

💡✨클래스 컴포넌트 → 함수형 컴포넌트 변환

:  (ex: 이름을 받아서 인사하는 컴포넌트)

✨ 클래스 컴포넌트 (이전 방식)

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

🧐 설명

class Greeting → 클래스를 사용해서 만든 컴포넌트야.

this.props.name → props로 전달된 name 값을 사용해.

props는 부모 컴포넌트에서 전달하는 값이야.

 

 

⬇⬇⬇ 같은 기능을 함수형 컴포넌트로 변환하면?

---

✨ 함수형 컴포넌트 (새로운 방식, 권장 방식)

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

🧐 설명

• 함수형 컴포넌트에서는 props를 ({ name }) 이런 식으로 받으면 돼!
• 더 짧고 간결하지? 😃
• this.props.name 대신 그냥 {name}을 사용하면 돼!

 

 

 

---

출처 : 오즈코딩스쿨 및 구글링, 챗지피티, 리액트 공식문서