React 컴포넌트와 JavaScript 비교

React 컴포넌트

React 컴포넌트는 React 앱을 구성하는 단위로서 React 공식 문서에는 다음과 같이 쓰여 있다.

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

즉, 다음과 같다.

React Component = JavaScript 함수
React Props = 함수 파라미터
React Element = 변수
JSX = HTML 태그 묶음 = Javascript 안의 HTML

Javascript 함수를 선언하고 호출할 줄 알면 React Component를 개념적으론 알고 있는 것이다.

Component 선언 및 호출

// Javascript 함수 선언
function welcome() {
  return "Hello world!";
}

// Javascript 함수 호출
const variable = welcome();

Javascript에서 함수를 선언하고 호출하는 방식이다.

// React Component 선언
function Welcome() {
  return <h1>Hello world!</h1>;
}

// React Component 호출
const element = <Welcome />;

React Component 이름은 대문자로 시작해야 한다는 규칙이 있다.

Component에 props 전달하기

// Javascript 함수 선언
function sum(a, b) {
  return a + b;
}

// Javascript 함수 호출
const result = sum(1, 2);

Javascript에서 함수에 매개변수를 넘겨주는 방식이다.

// React Component 선언
function Sum(props) {
  return <h1>{props.a + props.b}</h1>;
}
// React Component 선언 with ES6
function Sum({ a, b }) {
  return <h1>{a + b}</h1>;
}

// React Component 호출
const element = <Sum b={2} a={1} />;

Javascript 최신 문법인 ES6에선 기존보다 간결한 문법을 사용한다. 즉, Component는 props를 객체 형태로 받기 때문에 { }로 풀어서 받을 수 있다.

props 전달

함수는 파라미터를 순서로 구분하기 때문에 파라미터에 이름을 명시하지 않지만, Component는 props를 객체로 넘겨주기 때문에 각 파라미터의 이름과 데이터를 명시해서 넘겨줘야 한다. 대신 Component 호출 시 props는 순서 상관없이, 넘겨주고 싶은 값만 넘겨줄 수 있다.

props는 읽기 전용

그리고 Javascript는 파라미터가 객체면 함수 내부에서 객체 값을 변경할 수 있지만, React Component는 props 값을 Component 내부에서 변경할 수 없다.

Component의 반환

// Javascript 함수 반환
function sum(a, b) {
  return a + b;
}
const result = sum(1, 2);

// Javascript 함수 배열 반환
function sum1(a, b) {
  return [a + b, a + b];
}
const [result11, result12] = sum1(1, 2);

// Javascript 함수 객체 반환
function sum2(a, b) {
  return {foo: a + b, bar: a + b};
}
const result2 = sum2(1, 2)

Javascript 함수는 1개 항목만 반환할 수 있다. 만약 여러 항목을 반환하고 싶다면 배열이나 객체를 활용해야 한다.

// React Component 반환 (구 버전)
function Sum({ a, b }) {
  return (
    <div>
      <p>Lorem Ipsum</p>
      <h1>{a + b}</h1>
    </div>
  );
}

// React Component 반환 (React 16 : Return String)
function Sum({ a, b }) {
  return 'Lorem Ipsum ' + Number(a + b);
}
// React Component 반환 (React 16 : Fragment)
function Sum({ a, b }) {
  return (
    <>
      <p>Lorem Ipsum</p>
      <h1>{a + b}</h1>
    </>
  );
}

Javascript 함수가 값을 1개만 반환하듯이 React Component도 항상 1개의 React Element를 반환한다. 그래서 여러 React Element 반환하기 위해선 반환값 전체를 배열이나 <div>나 <span> 태그로 묶어야 했다. 하지만 쓸모없는 HTML 태그가 늘어나 HTML 구조가 복잡해지고, css 적용도 어려워진다는 단점이 있었다.

그래서 이를 보완하기 위해 React 16에선 React Component가 string 자료형도 반환할 수 있고, React Component의 반환값을 Fragment 태그(< > </>)로 묶을 수 있도록 변경됐다. 이를 활용하면 웹 페이지에 쓸모없는 HTML 태그가 늘어나는 것을 방지할 수 있고 코드 가독성도 높아진다.