[React] (리액트 공부하기 5) 효율적인 코드 작성 순서

리액트 개발에는 정해진 순서는 없고, 프로젝트의 요구사항과 개발자 스타일에 따라 달라질 수 있다고 한다.
하지만 나는 효율적인 코드 작성법이 궁금하였다.

일반적으로 다음과 같은 "작은 단위에서 큰 단위로" 개발 하는 것이 효율적이라고 한다.

---

1. 작은 단위(하위 컴포넌트)부터 개발

이유:

• 하위 컴포넌트는 상위 컴포넌트에 포함될 재사용 가능한 작은 단위이다.
• 먼저 하위 컴포넌트를 개발하면, 상위 컴포넌트에서 이를 쉽게 가져다 쓸 수 있다.

예:

1. Book 컴포넌트를 먼저 작성:

• 책 하나의 정보를 렌더링하는 역할.
• props를 받아 동적으로 데이터를 렌더링하도록 개발

function book(props) {
  return(
    <div>
      <h1>이 책의 이름은 {props.name}입니다.</h1>
      <h2>이 책은 총 {props.numOfPage}페이지로 이루어져 있습니다.</h2>
    </div>
  );
}
export default book;

리액트에서 export default Book;는
Book 컴포넌트를 외부에서 사용할 수 있도록 내보내는 역할을 한다.
자세한건 다음 장에서....

2. Book을 완성한 뒤, 동작이 제대로 되는지 테스트한다:

• 임시로 index.js에서 Book 컴포넌트를 렌더링:

import React from "react";
import ReactDOM from "react-dom/client";
import Book from "./Book";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Book name="리액트 입문" numOfPage={300} />);

결과적으로 하나의 책 정보가 화면에 나타난다.

---

2. 중간 단위(상위 컴포넌트) 작성

이유:

• 상위 컴포넌트는 하위 컴포넌트를 조합하여 더 큰 단위를 만든다.
• 하위 컴포넌트가 동작이 확인된 상태에서 조합하면 개발 속도가 빨라진다.

예:

1. Library 컴포넌트 작성:

• 여러 개의 Book 컴포넌트를 사용하여 도서관처럼 책 리스트를 렌더링.

function Library(props) {
  return (
    <div>
      <Book name="처음 만난 파이썬" numOfPage={300} />
      <Book name="처음 만난 AWS" numOfPage={400} />
      <Book name="처음 만난 리액트" numOfPage={500} />
    </div>
  );
}
export default Library;

2. index.js에서 Library를 임시로 렌더링하여 확인:

import React from "react";
import ReactDOM from "react-dom/client";
import Library from "./Library";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Library />);

결과적으로 여러 개의 책 리스트가 화면에 나타난다.

---

3. index.js에서 최종 구성

이유:

• index.js는 애플리케이션의 진입점(Entry Point)으로, 가장 마지막에 작업하는 것이 자연스럽다.
• 하위 및 상위 컴포넌트가 완성된 후에 최종적으로 어떤 컴포넌트를 렌더링할지 결정한다.

최종 코드:
index.js는 애플리케이션의 루트 컴포넌트를 화면에 표시하는 역할만 한다.

import React from "react";
import ReactDOM from "react-dom/client";
import Library from "./Library";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

---

일반적인 리액트 개발 순서

1. 작은 컴포넌트부터 작업:

• 재사용 가능한 컴포넌트를 먼저 작성.
• 예: Book처럼 기본적인 역할을 수행하는 단위 컴포넌트.

2. 중간 단위 컴포넌트 작성:

• 작은 컴포넌트를 조합해 더 큰 컴포넌트를 작성.
• 예: Library처럼 여러 Book을 조합해 리스트를 생성.

3. 최종적으로 진입점(index.js) 작성:

• 앱의 시작점으로, 모든 컴포넌트를 가져와 렌더링.

---

왜 이런 순서로 해야 할까?

1. 컴포넌트 재사용성:

• 작은 컴포넌트를 먼저 개발하면 여러 곳에서 쉽게 재사용할 수 있다.

2. 디버깅 용이성:

• 하위 컴포넌트부터 동작 확인 후 상위 컴포넌트를 조합하면 문제가 발생했을 때 원인을 쉽게 찾을 수 있다.

3. 유연한 개발:

• 작은 단위부터 작성하면 요구사항 변경 시 수정 범위가 적고 효율적이다.