컴포넌트(Components)

함수 컴포넌트

 

         - 컴포넌트를 정의하는 가장 간다한 방법은 JavaScript 함수를 작성하는 것이다. 

 

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

이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터)

객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 이다.

JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다.

 

 

클래스 컴포넌트(ES6 class 사용) 

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

 

 

컴포넌트 렌더링

 

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name = "Liam"/>
root.render(element);

<Welcome name="Sara" /> 엘리먼트로 root.render()를 호출한다. 

-> React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다. 

-> Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1>엘리먼트를 반환한다. 

-> React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 한다. 

 

*주의: 컴포넌트의 이름은 항상 대문자로 시작한다. 

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 

예를 들어 <div, /> 는 HTML div 태그를 나타내지만,

<Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다. 

 

컴포넌트 합성

 

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.

이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다. 

React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다. 

 

ex)

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
function App(){
    return (
        <div>
            <Welcome name = "Sara" />
            <Welcome name = "Cahal"/>
            <Welcome name = "Edite"/>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App());