React.js - React 컴포넌트, JSX로 UI 표현하기, Props로 데이터 전달하기

icems0428 2025. 1. 22. 20:32

React 컴포넌트

컴포넌트란, JSX (html 태그를 사용할 수 있는 확장된 자바스크립트 문법) 로 작성된 함수 또는 클래스를 말한다. 컴포넌트는 리액트 앱의 기본 구성 요소가 된다. 웹은 크게 Header, Main, Footer 부분으로 나눌 수 있고 이 역시 컴포넌트화 되는데, 구분하기 편하게 jsx 파일로 모듈화까지 한다.

또한, 리액트 앱에서 컴포넌트들은 계층구조를 가진다. 가장 최상위 계층은 root 컴포넌트이다. 관례적으로 루트 컴포넌트는 App 컴포넌트를 사용한다. 이러한 App 컴포넌트는 부모 컴포넌트가 되고, 자식으로는 헤더, 메인, 푸터 컴포넌트를 가지게 되겠다.

**(참고) vite로 만든 리액트 앱에서는 import 할 때 확장자를 쓰지 않아도 된다.

JSX로 UI 표현하기

JSX란 Javascript Extensions로, 확장된 자바스크립트 문법이다. 자바스크립트라면 html 태그를 오류로 판단하겠지만, JSX는 html 태그 역시 정상적으로 처리할 수 있어 컴포넌트 관리에 용이하다.

// JSX 주의 사항
// 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다
// 2. 숫자, 문자열, 배열 값만 렌더링 된다
// 3. 모든 태그는 닫혀있어야 한다
// 4. 최상위 태그는 반드시 하나여야만 한다

import "./Main.css";

const Main = () => {
  const user = {
    name: "박진주",
    isLogin: true,
  };

  if (user.isLogin) {
    return <div className="logout">로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
  
  //return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

JSX 주의 사항

중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
숫자, 문자열, 배열 값만 렌더링 된다.
모든 태그는 닫혀있어야 한다.
최상위 태그는 반드시 하나여야만 한다.

자바스크립트에서 **표현식**이란 무조건 값을 반환하는 코드를 말한다. 대표적으로 표현식에는 산술 연산, 논리 연산 등이 있다. 반면, **구문**은 특정 작업을 수행하거나 프로그램의 흐름을 제어하지만, 값을 반환하지 않는 경우가 있다.

if문과 for문은 return으로 값을 반환할 수는 있지만, 이는 구문 자체의 동작이 아니라 함수 내의 동작이다. 따라서, if문과 for문은 구문에 해당된다.

코드에 쓰인 삼항 연산자는 논리 연산에 따라 무조건 값이 결정되기 때문에 표현식이다.

Main.css

위에 작성된 Main.jsx의 스타일을 관리하기 위해 별도의 Main.css 파일을 만들고, 이를 임포트 해올 수 있다. 그리고 JSX에서 CSS 클래스를 가져올 때에는 HTML의 class 속성 대신, className을 사용해야 한다. JSX에서 class는 이미 예약어로 사용되고 있기 때문이다.

Props로 데이터 전달하기

// App.jsx
import "./App.css";
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";
import Button from "./components/Button";

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"블로그"}>
        <div>자식요소</div>
      </Button>
    </>
  );
}

export default App;

// Button.jsx
const Button = ({ text, color, children }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

Button.defaultProps = {
  color: "black",
};

export default Button;

우리가 함수를 호출할 때 인수로 값을 전달하듯이, js에서 컴포넌트를 호출할 때에는 props로 값을 전달한다.

예를 들어보자. 동일한 틀을 쓰는 버튼이 있다. 부모 컴포넌트에서 props만 전달해주면 자식 컴포넌트에서 해당 값을 받아와 버튼을 찍어내기만 하면 된다.

props를 전달하는 방법은 아주 간단하다. 부모 컴포넌트에서 전달하는 props는 객체 형식으로 묶여서 전달되는데, 자식 컴포넌트는 점 표기법으로 props의 프로퍼티에 접근할 수 있다. 자바스크립트와 동일한 방식이다. 그러므로 구조 분해 할당으로도 값을 가져올 수 있다. 구조 분해 할당을 사용하면 위의 코드와 같이 더욱 간결하게 표현할 수 있다.