WEB FE/React
[React] Component, State와 Props
heehminh
2023. 2. 3. 18:19
반응형
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 (데이터 초기값);
반응형