Component

components는 UI를 독립적이고 재사용 가능한 부분으로 분리합니다.
개념상 컴포넌트는 자바스크립트 함수와 비슷합니다. 임의의 입력 (props라고 부르는)을 받아들이고 어떤 게 화면에 나타나야 하는 지를 설명하는 React 요소를 반환합니다

Function

function moon(props){
return( <div> Hello, {props.name}</div> 
;) 

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

말그대로 자바스크립트 함수이기 때문에 함수형 컴포넌트라 부릅니다.

Class

Class moon extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Rendering a Component

이전에는 DOM 태그를 나타내는 React element 만 있었습니다.

const element = <div></div>

However, elements can also represent user-defined components:

const element = <Welcome name="sara" />

React가 유저가 정의한 컴포넌트를 나타내는 요소를 볼 때 JSX 속성을 이 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” 라고 부릅니다.

function Welcome(props){
return <h1> Hello, {props.name} </h1> 
}

const element = <Welcome name="sara" />
ReactDOM.render( element, document.getElementById('root') )

Let’s recap what happens in this example:

1. We call ReactDOM.render() with the <Welcome name="Sara" /*> element.
2. React calls the Welcome component with {name: 'Sara'} as the props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props.

⭕️

function sum(a,b){
 return a+b }

일부 함수는 입력을 변경하려 하지 않고 항상 동일한 입력에 대해 동일한 결과를 반환하기 때문에 “순수” 함수라고 부릅니다.

❌

function withdraw ( account , amount ) {
 account.total -= amount; 
 }

대조적으로 순수하지 않습니다.

⭐️ React 는 매우 유연하지만 한가지 엄격한 rule을 가지고 있습니다.

All React components must act like pure functions with respect to their props
모든 React 컴포넌트는 props와 관련한 동작을 할 때 순수 함수처럼 동작해야한다.