[카카오테크 부트캠프] React 컴포넌트

컴포넌트란 무엇인가?

• UI를 구성하는 독립적인 단위
  • 컴포넌트는 웹 애플리케이션의 UI를 구성하는 독립적인 블록입니다.
  • 각 컴포넌트는 자신만의 상태와 UI를 가지고 있으며, 다른 컴포넌트와 독립적으로 작동합니다.
• 재사용 가능한 코드 블록
  • 컴포넌트는 재사용 가능한 코드 블록으로, 한 번 작성한 컴포넌트를 여러 곳에서 재사용할 수 있습니다.
  • 재사용성을 통해 개발 시간을 단축하고, 코드의 일관성과 유지보수성을 높일 수 있습니다.
  • React에서는 하나의 파일에서 하나의 컴포넌트를 구성하는 것이 일반적

컴포넌트의 종류

함수형 컴포넌트

• 함수형 컴포넌트는 자바스크립트 함수로 작성됩니다.
  • 즉, function 키워드 혹은 화살표 함수를 통해서 구현
• 상태 관리와 생명주기 메소드를 사용하기 위해 React Hooks(예: useState, useEffect)를 사용할 수 있습니다.
• 코드가 간결하고 이해하기 쉬우며, 클래스형 컴포넌트보다 메모리 사용량이
  적습니다.

// 함수형 컴포넌트의 예시
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

클래스형 컴포넌트

• 클래스형 컴포넌트는 ES6 클래스를 사용하여 작성됩니다.
• React.Component를 상속받아 생성되며, 상태(state)와 생명주기 메소드를 포함합니다.
• 기존의 React 버전에서 널리 사용되었지만, React Hooks의 도입으로 함수형 컴포넌트로 대체되는 추세입니다.

import React from "react";

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

export default Greeting;

함수형 컴포넌트의 특징

• 간결하고 이해하기 쉬움
  • 함수형 컴포넌트는 단순히 자바스크립트 함수로 작성되기 때문에 코드가 간결하고 이해하기 쉽습니다.
  • 별도의 클래스를 선언할 필요 없이 함수의 형태로 UI를 정의할 수 있어 일반적으로 이 방법을 통해 컴포넌트를 생성합니다.
• React Hooks 사용 가능
  • 함수형 컴포넌트에서는 React Hooks를 사용하여 상태(state) 관리, 생명주기 관리 등의 기능을 사용할 수 있습니다.
  • useState, useEffect, useContext 등의 Hooks를 활용하여 기능을 추가할 수 있어 유연성이 높습니다.
• 상태와 생명주기 메소드를 Hook으로 대체
  • Hooks를 사용하여 함수형 컴포넌트에서도 상태를 관리하고 생명주기 동작을 처리할 수 있습니다.
  • 예를 들어, useEffect Hook을 사용하여 컴포넌트가 마운트되거나 업데이트될 때 특정 작업을 수행할 수 있습니다.

클래스형 컴포넌트의 특징

• ES6 클래스 문법 사용
  • 클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 React.Component를 상속받아 작성됩니다.
• 상태 관리 및 생명주기 메소드 포함
  • 클래스형 컴포넌트는 별도의 상태 관리를 위한 메소드를 클래스 내에서 정의하고 사용할 수 있습니다.
  • 생명주기 메소드를 통해 컴포넌트의 마운트, 업데이트, 언마운트 등의 주기에 따른 동작을 정의할 수 있습니다.
• 향후 호환성
  • React Hooks가 도입되기 전에 주로 사용되었으며, 기존의 코드베이스와 호환성을 유지하면서 기능을 추가할 수 있습니다.

JSX란 무엇인가?

• JavaScript XML (JSX)
  • JSX는 자바스크립트와 XML을 결합한 확장 문법으로, React에서 UI를 표현하기 위해 사용됩니다.
  • 자바스크립트 코드 내에 HTML과 비슷한 문법을 사용하여 React 요소를 생성할 수 있게 해줍니다.
• React 요소를 만들기 위한 문법
  • JSX를 사용하여 React 요소(React elements)를 생성하고 이들을 결합하여 UI를 작성할 수 있습니다.
  • JSX는 React.createElement() 함수 호출로 변환되어 React와 브라우저가 이해할 수 있는 자바스크립트 객체로 변환됩니다.
• JSX는 HTML과 비슷한 문법을 가지고 있지만, 서로 다른 요소이기 때문에 사용법에서 미세한 차이가 있습니다.

const Greeting = (props) => {
  return <h1 className="title">Hello, {props.name}!</h1>;
};

export default Greeting;

JSX의 장점

• 읽기 쉬운 코드
  • JSX는 HTML과 비슷한 문법을 사용하기 때문에, UI를 이해하고 읽기 쉽습니다.
  • UI 구조를 직관적으로 파악할 수 있습니다.
• 익숙한 HTML 문법 사용
  • HTML과 유사한 구조를 사용하기 때문에, 기존에 HTML을 사용해왔던 개발자들이 쉽게 학습하고 적용할 수 있습니다.
  • 태그, 속성, 이벤트 핸들러 등을 HTML과 동일한 방식으로 작성할 수 있어 생산성을 높입니다.
• 컴포넌트 구조 명확화
  • JSX를 사용하면 컴포넌트의 구조가 명확하게 드러나며, 각 요소와 이벤트 핸들러가 어떻게 결합되어 있는지 쉽게 파악할 수 있습니다.
  • 컴포넌트의 유지보수와 확장성이 용이하며, 코드의 일관성을 유지할 수 있습니다.

JSX 특징

• 중괄호를 사용한 자바스크립트 코드 삽입: JSX 내에서 자바스크립트 코드를 사용하려면 중괄호 {}를 사용합니다.

const element = <h1>Hello, {name}!</h1>;
const elements = (
  <div>
    {list.map((item) => (
      <h1 key={item}>Hello, {item}!</h1>
    ))}
  </div>
);

• 태그 닫기: 모든 태그는 닫혀 있어야 합니다. 단일 태그는 self-closing 태그로 작성합니다.

const element = <img src="logo.png" alt="Logo" />;

Key

• React에서 리스트를 렌더링할 때 각 항목에 고유한 식별자를 부여하는 역할을 합니다.
• 리스트 항목 간의 식별을 통해 React가 어떤 항목이 변경, 추가, 삭제되었는지 정확히 알 수 있습니다.
• 이를 통해 재렌더링 성능을 최적화할 수 있습니다.

const items = ["Apple", "Banana", "Cherry"];

const ItemList = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
// 배열의 인덱스를 Key로 사용하는 것은 권장하지 않음

React Hooks

• 리액트 훅(React Hooks)은 리액트 16.8 버전에서 새롭게 추가된 기능입니다.
• 이전에는 클래스 컴포넌트에서만 상태(state)를 관리하거나 라이프사이클 메서드를 사용할 수 있었지만, 훅을 이용하면 함수형 컴포넌트에서도 상태 관리와 다양한 리액트 기능을 사용할 수 있게 되었습니다.
• 일반적으로 useState , useEffect 등과 같이, 함수 이름 앞에는 보통 use 가 사용됩니다.

Hook의 장점

• 가독성: 클래스 컴포넌트보다 함수형 컴포넌트가 보다 간결하고 가독성이 좋습니다.
• 재사용성: 상태 관리나 부수 효과 로직을 별도의 훅으로 분리하여 재사용하기 용이합니다.
• 테스트 용이성: 훅을 사용하면 테스트가 쉬워지고 테스트 코드가 간단해집니다.