Component - component

4-1. Class Type Component

• 클래스형 컴포넌트
  • ES6에서 제공 되는 클래스 문법을 이용해 렌더링 될 컴포넌트를 정의하는 방법을 제공
  • render() 함수는 반드시 작성되어야 함
  • 반환 값으로는 렌더링 될 리액트 엘리먼트를 정의(일반적으로 JSX 사용)
  • 중복 되는 엘리먼트를 추상화해서 컴포넌트로 작성하고 재사용 하는 것이 리액트가 추구하는 방향
  • 함수형 컴포넌트의 쪽이 문법적으로 더 간결하고 메모리도 덜 사용하기에 권장되는 방식
  • 유상태 컴포넌트 사용 및 라이프 사이클 기능, 임의의 메소드 정의 등은 클래스형 컴포넌트에서만 사용 가능한 방식
  • 이러한 함수형 컴포넌트의 기능적 한계로 훅스(hooks)를 제공

4-2. Function Type Componenet

• 함수형 컴포넌트
  • 함수의 반환 값으로 리액트 엘리먼트만 정의해서 반환
  • 유의사항
    • 앞글자를 대문자로 정의
    • 사용자 정의 엘리먼트를 이용할 시 <Title/ > 과 같은 형식으로 사용하는데 앞 글자가 소문자이면 HTML로 인식하게 되고, 이는 존재하지 않는 HTML 태그 엘리먼트이기 때문에 에러 발생

        function Title() {

            return(
                <h1>Function Component</h1>
            );
        }

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

4-3. Component Composition

• 컴포넌트 합성
• 컴포넌트는 자신의 출력에 다른 컴포넌트 참조 가능
• 자신의 출력에 재사용 가능한 크기로 작게 유지
• 순수 함수처럼 작성

<div id="root"></div>

    <script type="text/babel">

        /* UserInfo에 user 객체를 props로 전달
        NameCard, AgeCard, PhoneCard, EmailCard에 각각의 값을 props로 전달
        +) user 객체를 여러개 정의해서 여러 UserInfo를 출력 */
         
        function NameCard(props){
            return <h1>{props.name}</h1>;
        }

        function AgeCard(props){
            return <h2 style={{color:"tomato"}} > {props.age}</h2>;
        }

        function PhoneCard(props){
            return <h3 style={{ backgroundColor : 'orange'}} > {props.phone}</h3>
        }

        function EmailCard(props){
            return <h3 style={ { backgroundColor:'yellow' }} > {props.email}</h3>
        }

        function UserInfo(props){
            return (
                <div style={ { width:300, border:'1px solid black'}}>
                    <NameCard name={props.name}/>
                    <AgeCard age={props.age}/>
                    <PhoneCard phone={props.phone}/>
                    <EmailCard email={props.email}/>
                </div>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(
            [
                <UserInfo name="홍길동" age={20} phone="010-1234-5678" email="hong123@gmail.com"/>,
                <UserInfo name="신사임당" age={40} phone="010-3232-3333" email="shin012@gmail.com"/>

            ]
        );
    </script>