[React]컴포넌트 생성 및 재사용하기

안녕하세요.

이번에는 리액트를 사용해 컴포넌트를 생성해보고 생선된 컴포넌트를 어떻게 재사용하는 법에 대해 알아보도록 하겠습니다.

 

먼저, App.js 파일에서 화면에 어떤 모습으로 보이길 원하는지 어떤 동직을 작동하길 원하는지에 대한 부분을 함수화합니다.

예시로 이미지를 함수에 담아보겠습니다.

function Profile() {

return (

<img

src="https://i.imgur.com/MK3eW3As.jpg"

alt="Katherine Johnson"

/>

);

}

export 코드를 이용해 해당 이미지 컴포넌트를 재사용해보겠습니다. 

export default function App() {

return (

<section>

<h1>인물사진</h1>

<Profile />

<Profile />

<Profile />

</section>

);

}

App.js 전체코드입니다.

function Profile() {

return (

<img

src="https://i.imgur.com/MK3eW3As.jpg"

alt="Katherine Johnson"

/>

);

}

export default function App() {

return (

<section>

<h1>인물사진</h1>

<Profile />

<Profile />

<Profile />

</section>

);

}

실행 화면 결과입니다.