리액트 - components and props

이 글은, 리액트 공식문서를 읽고 개념을 정리하고 잘못 알고 있었던 부분에 대하여 쓴 글입니다.

Components

개념적으로 컴포넌트는 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

여기서 "props"라고 하는 임의의 입력에 대하여 생각해보았습니다.

함수 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것입니다.

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

이 함수는 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다.

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

const element = <Welcome name="Sara" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다.

이 글을 보고 잘못 알고 있었던 점.
1. props는 하나의 예시일 뿐, 다른 이름으로도 가능하다.
2. 객체 형태로 전달된다.

예시

App.js

import Greetings from './Greetings';

function App() {
  return <Greetings name="younghoons"  />;
}
export default App;

Greetings.jsx

import React, { useEffect } from 'react';

const Greetings = (abc) => {
    useEffect(()=>{
        console.log(abc);
    },[])
    return (
        <div>
            {abc.name}
        </div>
    );
};

export default Greetings;

객체로 전달되기 때문에 비구조화 할당을 사용한 동일 코드

const Greetings = ({name}) => {
    return (
        <div>
            {name}
        </div>
    );
};

Props는 읽기 전용입니다.

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수 => 순수 함수

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체의 props를 바꾸면 안됩니다.

https://ko.reactjs.org/docs/components-and-props.html