[React] Component, State와 Props

1- Component

‘props’라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다.

 

Class Component

• React.Component 클래스를 상속
• 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JS를 반환하기 위해 render() 함수를 사용한다.

 

Function Component

• props로 받을 객체 인자를 정의하고, JSX를 반환하는 것을 기본 형태로 갖춘다.
• return 문에서 JSX를 반환할 수 있다.

Props, State는 데이터를 다룰 때 사용한다.

2- Props (properties)

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이기 때문에 자식 컴포넌트에서느 변경할 수 없다. (읽기 전용, immutable)

<ChatMessages
	messages={messages}
	currentMember={member}
/>

• props를 받을 때, 구조 분해 할당을 사용하여 점 연산자 사용을 줄일 수 있다.

3- State

한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있다. (mutable) state가 보여지기 위해서는 반드시 render가 필요하다.

import React, { useState } from 'react';

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  const [count, setCount] = useState(0);

  return <div>
    <Text text={count} />
    <div onClick={() => setCount(count + 1)}>+</div>
  </div>
}

• 함수 컴포넌트에서 State를 사용하기 위해서는 useState라는 Hooks을 사용해야 한다. useState는 State 변수의 초기값을 매개변수로 전달하여 호출되며, 결과값으로 배열을 반환하게 된다.
• const [변수명, Set함수명] = useState (데이터 초기값);