서론

React 프레임워크 기반으로 프론트엔드 개발을 한 지 어느덧 2년이 조금 넘어가는 시기.
그동안 React에 대해 얼마나 제대로 잘 알고 있는지 회고를 해본 결과, 막상 명확하게 설명할 수 있는 부분이 많이 없는 것 같았다.

그래서 더 늦기 전에 공식 문서를 기반으로 React의 본질적인 기능과 원리를 공부해보기로 다짐했다.

이번 포스트에서 배울 수 있는 내용은 아래와 같다.

• Component 란 무엇인가?
• React 앱에서 Component 의 역할
• React Component 작성 방법

본론

React Component

컴포넌트란 무엇일까?

컴포넌트란 React 의 핵심 개념 중 하나이며, 기능별로 컴포넌트를 작성하여 재사용성, 유지보수성 두 가지 SW 특성을 유지할 수 있다.

컴포넌트를 내보내고 불러오는 방법은 무엇일까?

React의 Component에서는 또 다른 Component를 불러와서(import) 사용할 수 있는데, 예를 들면 아래와 같다.

예시

Album 이라는 컴포넌트에 사용자들의 프로필 정보를 담고 있는 Profile 컴포넌트를 삽입하고 싶은 경우

🔎 Component 내보내기

// src/components/Profile.jsx
export default function Profile {
	return (
      	<img src='#' alt="userPhoto"/>
    )
}

🔎 Component 불러오기

// src/components/Album.jsx
import Profile from './Profile'

const Album = () => {
	return (
    	<ul>
        	<li>
              <Profile />
        	</li>
        </ul>
    )  
};

export default Album;

React 컴포넌트에 대한 규칙은 무엇이 있을까?

💡 React Component는 이름이 대문자로 시작하여야 한다.
💡 React Component의 return 구문을 소괄호(()) 로 묶어야한다.

브라우저는 React 컴포넌트에서 return 되는 jsx 구문을 어떻게 인식할까?

앞에 예시 코드들을 기반으로 아래와 같은 jsx 구문이 있다고 생각해보자.

import Profile from './Profile';

const Album = () => {
	return (
      <ul>
        <li><Profile/></li>
        <li><Profile/></li>
        <li><Profile/></li>
      </ul>
    )
};

export default Album;

브라우저는 위의 코드를 다음과 같이 일반 HTML 구문처럼 인식한다.

import Profile from './Profile';

const Album = () => {
	return (
      <ul>
        <li>
      		<img src='#' alt="userPhoto"/>
        </li>
        <li>
      		<img src='#' alt="userPhoto"/>
        </li>
        <li>
      		<img src='#' alt="userPhoto"/>
        </li>
      </ul>
    )
};

export default Album;

컴포넌트를 정의할 때 주의할 점은 무엇이 있을까?

❗️ 특정 컴포넌트 내부 스코프에 또다른 컴포넌트를 정의하지 않도록 한다.

const Album = () => {
  
  // 🚫 Bad
	const Profile = () => {
    	return <img src='#' alt="userPhoto"/>;
    };
  
  return (
    <ul>
      <li><Profile/></li>
      <li><Profile/></li>
      <li><Profile/></li>
    </ul>
  )
}

export default Album;

위와 같이 특정 컴포넌트 내부에 또다른 서브 컴포넌트를 정의할 경우, 렌더링 속도가 매우 느려지거나 예기치 못한 버그를 유발할 수 있다고 한다.

따라서, 특정 컴포넌트 내부에 또다른 서브 컴포넌트를 정의하려면 아래와 같이 가장 최상위 스코프에 정의해야한다.

// 🟢 Good
const Profile = () => {
    	return <img src='#' alt="userPhoto"/>;
    };

const Album = () => {
  return (
    <ul>
      <li><Profile/></li>
      <li><Profile/></li>
      <li><Profile/></li>
    </ul>
  )
}

export default Album;

결론

🔎 React를 통해 재사용 가능한 UI Component를 만들 수 있다.
🔎 React 앱에서 모든 UI 부분은 Component 이다.
🔎 React Component는 다음을 제외하면 그저 일반 JS 함수일 뿐이다.

• Component 는 항상 대문자로 시작하여야 함.
• Component 는 JSX 형식의 마크업을 반환함.