Components

📋 Components

화면에서 UI요소를 구분할 때 컴포넌트라는 용어를 사용한다.
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
javascript 함수와 유사하며 HTML의 비효율적인 중복되는 코드를 줄일 수 있다.
컴포넌트에는 함수형 컴포넌트, 클래스형 컴포넌트가 있다.

컴포넌트 구성 요소

1. props

• 상위 컴포넌트에서 하위 컴포넌트로 특정 값을 전달 할 때 사용
• 프로퍼티의 값은 수정할 수 없다.

2. state

• 컴포넌트의 상태값을 수정하거나 저장할 수 있는 객체이다.
• state의 값을 변경하고자 한다면 setState 함수로 상태 관리를 해주어야 한다.

함수형 컴포넌트

아래 코드처럼 자바스크립트 함수 형태로 작성된 컴포넌트를 함수형 컴포넌트라 한다.

화살표 함수도 당연히 사용 가능하다.

함수 형태로 컴포넌트를 정의하며 return 내부에 JSX 코드를 반환한다.

function App() {
  return (
    <div>
   		<h1>Hello React!</h1> 	
    </div>
  )
}

클래스형 컴포넌트

자바스크립트의 클래스 문법을 기반으로 작성된 컴포넌트이다.

React의 Component를 상속받아 사용해야 하며 render() 메서드로 렌더링 작업을 필수로 해주어야 한다.

class App extends Component {
  render() {
    return (
      <div>
      	<h1>Hello React!</h1> 
      </div>
  }

참고

리액트 공식문서
컴포넌트 구성요소