Element
- element 는 불변객체이다
-> 생성 이후에는 자식이나 속성을 변경할 수 없다.
React 앱은 ReactDOM.render()를 한 번만 호출한다. element의 자식 요소를
변경하고 반영하고싶다면, 계속해서 ReactDOM.render()을 호출해야 한다.
Component
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
- Functional Components
Component를 생성하는 가장 간단한 방법이며 state와 LifeCycle이 없다. 대신 props를 받을 수 있고 React elements를 리턴할 수 있다. 초기 마운트가 빠르고 메모리 자원을 덜 쓴다.
import React from 'react';
function Hello(props) {
return (
<div>Hello {props.name}</div>
);
}
export default Hello;- Class Components
EcmaScipt 6에 도입된 class 문법을 사용한다. 컴포넌트에서 LifeCycle API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야한다
import React, { Component } from 'react';
class Hello extends React.Component {
render() {
return (
<div>Hello {this.props.name}</div>
);
}
}
export default Hello;Props
- props 는 속성을 나타내는 데이터다. 하나의 component를 어떤 데이터로 구성할 것인지를 props의 데이터로 알 수 있다.
이 함수는 하나의 props만 갖고 있고 React element를 반환하는 컴포넌트이다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}Welcome 이라는 component 에 name props 데이터를 담고 있다.
하나의 component 에는 여러 개의 component로 또 나눠질 수 있다.
Props 는 읽기 전용!
⭐️ 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 된댜.
⭐️ 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
- 순수함수 : 입력 값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수
function sum(a, b) {
return a + b;
}