| Components, Props

1. 컴포넌트 만들기

함수 컴포넌트

function Sayhi(props) {

return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;

}

클래스 컴포넌트

class Sayhi extends React.Component {

render() {

return <h1>안녕하세요, 저는 {this.props.name} 입니다.</h1>;

}

}

이런 식으로 컴포넌트를 만들 수 있습니다.

리액트 엘리먼트에 사용자 지정 컴포넌트를 사용할 수 있습니다.

const element = <Sayhi name="David" />;

렌더링 하려면

function Sayhi(props) {

return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;

}

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

const element = <Sayhi name="David" />;

root.render(element);

이런 식으로 사용하면 됩니다.

이때 리액트는 { name: "Lee" }를 props로 Sayhi컴포넌트를 호출합니다.

그럼 결과적으로 <h1>안녕하세요, 저는 David 입니다.</h1> 엘리먼트를 반환해 줍니다.

리액트에서는 컴포넌트 안에 다른 컴포넌트를 참조할 수 있습니다.

일반적으로 새로운 리액트앱의 최상위에는 App 컴포넌트를 가지고 있습니다.

function Sayhi(props) {

return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;

}

function App() {

return (

<div>

</div>

);

}

이런 식으로 Sayhi를 여러 번 렌더링 하는 다른 컴포넌트를 만들 수 있습니다.