[react 공식문서] 02 Importing and Exporting Components

리액트 공식문서 학습기록
https://react.dev/learn

Importing and Exporting Components

실습

그냥 js문법임.
섞어쓰는 예제 하나로 정리 끝.

재사용성

중첩된 컴포넌트는 분리하는게 좋다.
🤔 안다. 그래서 어디까지 어떻게 분리할 것인가?
아토믹 디자인 패턴
참고) next.js나 nuxt.js, sveltekit 등을 쓴다면 같은 레이아웃내에서 내용물만 바뀔땐 해당 프레임워크의 layout 기능을 이용하는게 리렌더링이 일어나지 않아서 더 성능이 좋음.

import Layout from './Layout.js';

const App = () => {
  return (
    <Layout>
      페이지내용들..
    </Layout>
  );
}
export default App;

왠만하면 페이지별로 요렇게 쓰지 말란 이야기.

과제

App.js

import Gallery from './Gallery.js';
import Profile from './Profile.js';

const App = () => {
  return (
    <div>
      <Profile />
    </div>
  );
}
export default App;

Gallery.js

import Profile from './Profile.js'

const Gallery = () => {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
export default Gallery;

Profile.js

const Profile = () => {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}
export default Profile;