리액트 JSX와 Props에 대해 알아보기

 

오늘은 리액트의 JSX와 props에 대해 알아보자.

 

JSX

JSX(javascript xml)는 javascript를 확장한 문법이다. React을 통해 UI가 어떻게 생겨야 하는지 직관적으로 살펴볼 수 있으며 브라우저에서 실행되기 전에는 바벨을 사용하여 일부 자바스크립트 형태의 코드로 변환되어 사용된다는 특징을 가지고 있다. 

 

JSX 문법에서는 반드시 지켜야 하는 것들이 몇 가지가 있는데 이는 다음과 같다. 

 

• 반드시 부모 요소 하나가 감싸는 형태여야 한다. 
• 자바 스크립트 표현식을 작성하려고 한다면 JSX내부에서 코드를 {}로 감싸주면 된다. 쉽게 이야기하자면 javascript에서 값을 선언해서 JSX에서 사용할 때는 {}을 사용하여 처리한다. 
• JSX로 css을 받아와 사용할 때에는 class가 아닌 className을 이용하여 처리한다.

아래는 JSX로 만든 예시 코드이다.

 

🖥️ main.js

import "./ExpenseItem.css";

function ExpensItem() {
  const expenseDate = new Date(2021, 2, 28);
  const expenseTitle = "Car Insurance";
  const expenseAmount = 294.67;

  // return 할 때는 반드시 부모요소 하나만을 가지고 있어야 한다. 
  return (
    <div className="expense-item">
      <div>{expenseDate.toISOString}</div>
      <div clasName="expense-item__description">
        <h2>{expenseTitle}</h2>
        <div className="expense-item__price">${expenseAmount}</div>
      </div>
    </div>
  );
}

export default ExpensItem;

 

 

 

 

Props

Props는 properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해주어야 할 때 사용한다. 예를 들어서 App이라는 컴포넌트에서 CourseGoalItem 컴포넌트에게 goalItem이라는 값을 전달하고 싶다고 가정하면 다음과 같이 코드를 작성할 수 있다. 

 

📣 부모 태그에서 자식 태그에게 정보를 전달 할 때 사용하는 매개변수

 

 

🖥️ App.js

import ExpensItem from "./components/ExpenseItem";

function App() {
  const expenseDate = new Date(2021, 2, 28);
  const expenseTitle = "Car Insurance";
  const expenseAmount = 294.67;

  return (
    <div>
      <h2>제목</h2>
      <ExpensItem
        date={expenseDate}
        title={expenseTitle}
        amount={expenseAmount}
      ></ExpensItem>
    </div>
  );
}

export default App;

해당 코드를 살펴보면 ExpensItem 컴포넌트에 date, title, amout 값을 넘겨줬다. 그럼 ExpensItem에서는 어떻게 이 값을 받아 사용할 수 있을까?

 

🖥️ ExpenseItem.js

import "./ExpenseItem.css";

function ExpensItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div clasName="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpensItem;

ExpensItem 컴포넌트에서는 props라는 것을 통해 넘어온 값들을 받아 처리한다. 넘어온 데이터를 조회하기 위해서는 "."을 통해 조회한다. 

 

예를 들어서 date, title, amout 값이 넘어왔으므로 이 데이터에 접근하기 위해서는 props.date, props.title, props.amout을 이용하여 접근한다.  만약 props.처럼 조회하는 것이 아닌 date, title, amout 파라미터 자체로 받고 싶게 구조를 만들고 싶다면 함수의 파라미터에서 비구조화 할당 문법을 사용하면 코드를 쉽게 작성할 수 있다. 

 

 

🖥️ ExpenseItem.js

import "./ExpenseItem.css";

function ExpensItem({ date, title, amount }) {
  return (
    <div className="expense-item">
      <div>{date.toISOString()}</div>
      <div clasName="expense-item__description">
        <h2>{title}</h2>
        <div className="expense-item__price">${amount}</div>
      </div>
    </div>
  );
}

export default ExpensItem;

 

Props.Children

props.children이란 컴포넌트 태그 사이에 값을 조회하고 싶을 때 사용한다. 

 

🖥️ WelcomeDialog.js

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

WelcomeDialog에서는 FancyBorder 컴포넌트 사이에 여러 내용을 담고 있다. 

 

🖥️ FancyBorder.js

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

FancyBorder 컴포넌트에서는 WelcomDialog에서 태그 사이에 받은 내용을 props.children을 통해 나타내고 있다. 흡사 python의 decoration문법과 비슷하다.