(리액트) 컴포넌트

쉬운 목차

구성 요소

클래스 및 함수 구성요소

클래스 구성요소

클래스형 컴포넌트의 경우 상태 함수와 생명주기 함수를 사용할 수 있다.
모든 메서드를 정의할 수 있습니다.

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    const name="ogu";
    return <div className="react">{name}</div>;
  }
}

기능적인 부분

클래스 구성 요소보다 선언하기가 훨씬 쉽습니다.
또한 분류된 구성 요소보다 적은 메모리 리소스를 사용합니다.
결과 파일 크기가 더 작음
state API와 lifecycle API를 사용할 수 없는 단점이 있었는데 v16.8 업데이트 이후 hooks 도입으로 해결되었습니다.

import React from 'react';

export default function App() {
  const name="ogu";
  return <div className="react">{name}</div>;
}

소품

: 구성 요소 속성을 설정하는 요소입니다.

기본 소품 설정: defaultProps

import React from 'react';

export default function MyComponent(props) {
  return (
    <div>안녕, 내 이름은 {props.name}이야</div>
  );
};

MyComponent.defaultProps = {
 name : '기본 이름 '
}

구조 분해 할당 구문을 통해 소품에서 내부 값 추출

import React from 'react';

export default function MyComponent(props) {
  const {name} = props;
  // 변수 선언을 하여 객체에 props를 할당해주어 props.name을 호출하지 않고 name만 호출되게 한다.
  return (
    <div>안녕, 내 이름은 {name}이야</div>
  );
};


import React from 'react';

export default function MyComponent({name}) {
// 매개변수에 props 대신 객체를 넣어 props.name을 호출하지 않고 name만 호출되게 한다.
  return (
    <div>안녕, 내 이름은 {name}이야</div>
  );
};

상태

: 구성 요소 내에서 변경될 수 있는 값입니다.

props는 컴포넌트를 사용할 때 부모 컴포넌트가 설정한 값으로, 컴포넌트 자체는 읽기 전용 모드에서만 해당 props를 사용할 수 있습니다.

기능 구성 요소는 useState를 사용합니다.

useState 함수를 호출하면 배열이 반환되고 배열의 첫 번째 요소는 현재 상태이고 두 번째 요소는 상태를 변경하는 함수(setter 함수)입니다.

컨디션 사용시 주의사항

상태 값을 업데이트할 때는 항상 setter 함수를 사용하십시오.