React - Component

React

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

Hooks

리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리이다.

hook 규칙
1. 최상위에서만 hook을 호출해야한다.

• 반복문이나 조건문, 중첩된 함수 내에서 hook을 호출하면 안됨

2. 리액트 함수 내에서만 hook을 호출해야한다.

• hook은 일반적인 js 함수에서는 호출하면 안됨

Component

React 앱의 구성 요소로, 재사용 가능하도록 만들어져 있으며 UI를 작은 조각으로 나누어 관리한다.
컴포넌트를 작성할때 보통 대문자로 작성한다.

클래스형 컴포넌트

React.Component 클래스를 상속받아서 구현

• 장점
  - 생명주기 메서드 제공 (생명주기 메서드를 사용할 수 있어서 컴포넌트의 생명주기 동안 특정 동작을 쉽게 구현할 수 있다.
• 단점
  - 문법이 복잡하고, this 키워드를 자주 사용해야 하므로 코드를 작성하고 이해하기 어려울 수 있다.
  - 함수형 컴포넌트에 비해서 코드가 더 길다
  - Hooks 도입 이후 사용률이 감소되었다.

함수형 컴포넌트

함수형태로 구현

• 장점
  - 코드 길이가 줄어들고, this 키워드를 사용할 필요가 없어서 이해하기 쉽다
  - Hooks를 사용하여 함수형 컴포넌트에서도 상태관리와 생명주기 메서드와 유사한 기능을 구현할 수 있다.
  - 메모리 사용이 더 적고, 성능이 더 좋다.
• 단점
  - Hooks를 사용한 생명 주기 관리가 클래스형 컴포넌트의 메서드보다 직관적이지 않아서 이해하는데 어려움이 있을 수 있다.
  - 레거시 코드 호환이 떨어진다(기존 클래스형 컴포넌트와 호환이 어려울 수 있다)

state와 props

React 컴포넌트는 두 종류의 데이터를 다룬다.
1. state(상태) : 컴포넌트의 내부에서 관리되며 컴포넌트의 동작 및 UI 렌더링을 제어하는데 사용 (내부 상태를 관리)
2. props(속성) : 부모 컴포넌트로부터 전달되는 읽기 전용 데이터

React에서 상태와 변수는 둘 다 데이터 저장과 관련되어 있지만, 각기 다른 역할과 사용방식을 가진다.
상태(state)는 React 컴포넌트에서 데이터가 저장되는 곳으로, 상태값이 변경될 때 마다 컴포넌트가 다시 렌더링 된다.
변수는 컴포넌트 내에서 상태가 아닌 일반 데이터를 저장하기 위해 사용되므로 변수값이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.

클래스형 컴포넌트 예제

// Component 예제

import { Component } from "react";


// 클래스형 컴포넌트
class Exam1 extends Component {

  constructor(prop) {
    super(prop);
    this.state = { count: 0 }; // state : 컴포넌트의 내부 상태를 관리하는데 사용되는 데이터
    // count는 Exam1이라는 컴포넌트의 내부 상태 중 하나의 데이터이며,
    // 초기값이 0으로 설정됨.
  }

 
  // 메서드(함수)
  handleClick = () => {
    // handleClick이라는 이름의 함수를 정의함
    this.setState({ count: this.state.count + 1 });
    // 이 컴포넌트의 상태(state)중 count를 현재 상태값에서 + 1 한 값으로 상태를 다시 세팅(변경).
  };

  // render 함수 (클래스형 컴포넌트에서 필수 구문)
  render() {
    // 클래스형 컴포넌트에서 render 함수 안에 return 구문을 필수로 작성해야한다.
    // return 에는 무엇을 렌더링할지 작성하면 됨.
    return (
      <div>
        <h1>Count : {this.state.count}</h1>
        <button onClick={this.handleClick}>증가</button>
      </div>
    );
  }
}

export default Exam1; // 컴포넌트 내보내기

함수형 컴포넌트 예제

import { useState } from "react";

// 함수형 컴포넌트
function Exam2() {
  // 함수형 컴포넌트에서 상태를 사용하는 방법
  const [name, setname] = useState("나의 이름은?");

  const handleClick = () => {
    setname("김종조");
  };

  return (
    // 함수형 컴포넌트는 render() 함수 제외하고 바로 return 작성하면 된다
    <div>
      <h1>Hello, {name}</h1>
      <button onClick={handleClick}>이름 변경</button>
    </div>
  );
}

export default Exam2; // 컴포넌트 내보내기