React : Components

✅ 운영체제 : Windows 11

---

컴포넌트(Components)

🌠 참고자료
React 공식문서 Components와 Props
React 공식문서 React.Component
W3SCHOOLS React Components
갓대희 4. React 컴포넌트(1) - 컴포넌트란?
벨로퍼트와 함께하는 모던 리액트 1장 - 3.나의 첫번째 리액트 컴포넌트

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조작으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

개념적으로 컴포넌트는 Javascript 함수와 유사하다.

✨ 정리

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 컴포넌트(Component)는 일종의 UI 조각 ▶ 재사용 용이
• props를 입력받은 state 상태에 따라 DOM Node를 출력
• 컴포넌트(Component) 이름은 항상 대문자로 시작

함수형 컴포넌트(Function Components)

🌠 참고자료
re;eruch React Function Components
freeCodeCamp React Functional Components, Props, and JSX – React.js Tutorial for Beginners

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

✨ 정리

• props객체를 받아 React 엘리먼트를 반환한다.
• Javascript 함수이기 때문에 함수 컴포넌트라고 부른다.
• 간결하다. ▶ 코드가 짧음

클래스형 컴포넌트(Class Components)

🌠 참고자료
W3SCHOOLS React Class Components

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

✨ 정리

• extends React.Component 속성을 포함해야 한다.
• ES6 class를 사용하여 컴포넌트를 정의할 수 있다.
• React의 생명주기를 모두 포함한다.
• 함수형 컴포넌트가 해결하지 못하는 작업을 클래스 컴포넌트가 처리할 수 있다.