3 React | Component

ES6 에서 제공되는 클래스 문법을 이용하여 렌더링 될 컴포넌트를
정의하는 방법을 제공한다.
render() 함수는 반드시 작성되어야 하며, 반환값으로는 렌더링 될
리액트 엘리먼트를 정의한다.. - 일반적으로 jsx 사용

컴포넌트를 정의하는 방법은 현재 두 가지 방식을 제공한다.
클래스형 컴포넌트와 함수형 컴포넌트이다.
사용하는 것은 함수형 컴포넌트가 더 간결하고 선언하기도 편하며,
메모리도 덜 사용하기에 더 권장되는 방식이다.
하지만 state 사용 및 라이프사이클 기능 등
클래스 컴포넌트에서만 사용 가능한 방식이 있는데,
이러한 함수형 컴포넌트의 기능적 한계로 hooks 를 제공하고 있다.
리액트 팀은 함수형 컴포넌트 사용을 권장하고 있으나,
클래스형 컴포넌트를 없애기보다는 유지하는 방향을 선택하고 있다.

1. 클래스형 컴포넌트

<script type="text/babel">
  class Title extends React.Component{
      render(){
          return <h1>class component</h1>;
      }
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<Title/>);
</script>

2. 함수형 컴포넌트

첫글자 대문자로!

<script type="text/babel">
  function Title(){
      return (
          <h1>function component</h1>
      )
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<Title/>);
</script>

3. 컴포넌트 합성

컴포넌트는 자신에 출력에 다른 컴포넌트를 참조할 수 있다.
컴포넌트는 재사용 가능한 크기로 작게 유지해야 하며, 순수 함수처럼 작성되어야 한다.

-> 순수함수 : 동일한 입력값에 동일한 결과값을 반환한다.

<script type="text/babel">

    const user = {
        name : "홍길동",
        age : 20,
        phone : "010-1234-5678",
        email : "hong@gmail.com"
    };

    function NameCard(){
        return <h1>{user.name}</h1>
    }
    function AgeCard(){
        return <h1>{user.age}</h1>
    }
    function PhoneCard(){
        return <h1>{user.phone}</h1>
    }
    function EmailCard(){
        return <h1>{user.email}</h1>
    }


    function UserInfo(){
        return (
            <>
                <NameCard/>
                <AgeCard/>
                <PhoneCard/>
                <EmailCard/>
            </>
        )
    }

    ReactDOM.createRoot(document.getElementById("root")).render(<UserInfo/>);

</script>