React : Components

daymoon_·2022년 3월 26일
0

React

목록 보기
7/12
post-thumbnail

✅ 운영체제 : 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의 생명주기를 모두 포함한다.
  • 함수형 컴포넌트가 해결하지 못하는 작업을 클래스 컴포넌트가 처리할 수 있다.
profile
새벽과 코딩을 아우르는 미지의 공간 _ Study Log 🌙

0개의 댓글