컴포넌트(1) 함수/클래스형 컴포넌트

 

    1) 함수형 컴포넌트 (Stateless Functional Component)

    - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다.

    - 여기서 import시 js, jsx 등 파일 확장자를 생략해도 자동으로 찾을 수 있다. 

        이는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 때문이다. 

        확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해

확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다.

 

function Footer(props) {
    return (
        <div>
            <footer>
                <h1>푸터입니다.</h1>
            </footer>
        </div>
    );
}

 

    2) 클래스형 컴포넌트 ( Class Component )

    - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. 

    - 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

    - 이에 주로 함수형 컴포넌트를 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때가 있는데 이때 클래스형 컴포넌트를 사용

class Header extends Component {
    render() { //HTML을 웹 페이지에 렌더링 한다. 
        return (
            <div>
                <header>
                    <h1>헤더입니다.</h1>
                </header>
            </div>
        );
    }
}