컴포넌트 문법

리액트 엘리먼트(React Element)

JSX문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

import ReactDOM from "react-dom/client";

const element = <h1>안녕 리액트!</h1>;
console.log(element);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}

이런 객체를 리액트 엘리먼트라고 부르는데 이 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것이다.

리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소이다.

리액트 컴포넌트(React Component)

리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법이다.

컴포넌트를 만드는 가장 간단한 방법은 자바스크립트의 함수를 활용하는 건데, 아래 코드에서 JSX 문법으로 작성된 하나의 요소를 리턴하는 Hello 함수가 바로 하나의 컴포넌트이다.

이렇게 요소를 컴포넌트로 작성하게 되면 다양한 장점들이 있다.

1. 재사용성

• 모듈화: 컴포넌트는 독립적인 코드 블록으로, 여러 곳에서 재사용할 수 있다. 동일한 UI 요소를 여러 번 사용해야 할 때, 컴포넌트를 작성하면 코드 중복을 줄일 수 있다.

2. 유지보수성

• 분리된 책임: 각 컴포넌트는 특정 기능이나 UI를 담당합니다. 이를 통해 코드가 더 명확해지고, 특정 컴포넌트에서 발생하는 버그를 쉽게 찾고 수정할 수 있다.
• 독립적인 개발: 팀원들이 서로 다른 컴포넌트를 독립적으로 개발할 수 있어 협업이 용이해집니다.

3. 가독성

• 명확한 구조: 컴포넌트를 사용하면 애플리케이션의 구조가 명확해져 코드의 가독성이 향상된고, 각 컴포넌트가 어떤 역할을 하는지 쉽게 이해할 수 있다.
• 단순화된 UI: 복잡한 UI를 여러 개의 작은 컴포넌트로 나누면, 각 컴포넌트가 단순해지므로 전체적인 이해가 쉬워진다.

4. 상태 관리

• 로컬 상태 관리: 각 컴포넌트는 자신의 상태를 관리할 수 있어, 상태의 변화를 더 쉽게 처리할 수 있다. 이는 UI의 동적인 부분을 구현하는 데 유리하다.
• 상태 분리: 서로 다른 컴포넌트가 독립적으로 상태를 관리할 수 있으므로, 상태 변경이 다른 컴포넌트에 미치는 영향을 최소화할 수 있다.

5. 생명주기 관리

• 컴포넌트 생명주기: 각 컴포넌트는 자신의 생명주기를 갖고 있어, 마운트, 업데이트, 언마운트 시에 필요한 작업을 쉽게 처리할 수 있어 리소스 관리와 최적화에 유리하다.

6. 테스트 용이성

• 독립적인 테스트: 각 컴포넌트를 독립적으로 테스트할 수 있어, 유닛 테스트와 통합 테스트가 더 수월해진다. 이는 코드의 신뢰성을 높이는 데 도움이 된다.

7. 성능 최적화

• React.memo: 리액트는 컴포넌트가 업데이트될 때, 필요한 경우에만 리렌더링을 수행한다. 이를 통해 성능을 최적화하고 불필요한 렌더링을 줄일 수 있다.

8. CSS 및 스타일링

• 스타일 캡슐화: 각 컴포넌트에 스타일을 캡슐화하여 특정 컴포넌트의 스타일이 다른 컴포넌트에 영향을 미치지 않도록 할 수 있다. CSS 모듈, styled-components 등의 기법을 활용할 수 있다.

import ReactDOM from "react-dom/client";

function Hello() {
  return <h1>안녕 리액트</h1>;
}

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

그리고 이렇게 컴포넌트를 작성하면, 위 코드에서 element 변수 안의 JSX 코드에서 볼 수 있듯 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수가 있다.

이런 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수가 있다.

//Dice.js
import diceBlue01 from "./assets/dice-blue-1.svg";

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

//App.js
import Dice from "./Dice";

function App() {
  return (
    <div>
      <Dice />
    </div>
  );
}

export default App;

한 가지 주의해야 할 부분은, 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 한다는 것이다. 컴포넌트 이름의 첫 글자가 소문자라면 오류가 발생하니 꼭 주의하도록 하자.