3. React 기초 및 실습: JSX, Component, CSS (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

1. JSX 란?

자바스크립트 XML을 의미한다.

리액트에서는 JSX 문법을 사용하는데, 우리가 리액트 환경에서 JSX 문법으로 코드를 작성하면 자동으로 브라우저에서 작동하는 코드로 변환 해준다는 정도로 알고 있으면 된다.

---

2. 사용자 지정 Component 만들기

Component 만들 때의 몇가지 관례

• 대문자로 시작해야 한다.
• 컴포넌트의 이름으로 해당 컴포넌트가 어떤 작업을 하는지 유추하기 쉬워야 한다. 

Component 만들기 

 

 

 

1. src 폴더에 components 폴더를 만든다.
2. 위의 관례에 맞게 컴포넌트를 생성한다. 확장자 명은 .js

 

 

해당 실습에서는 ExpenseItem.js로 컴포넌트를 만든다.

import와 export

ExpenseItem.js 에 아래와 같이 입력했다. app.js에서 ExpenseItem 컴포넌트를 불러오기 위해선

ExpenseItem컴포넌트에서 마지막 라인에 export default로 컴포넌트를 export 해주어야 한다.

const ExpenseItem = () => {
  return (
    <div>
      <div>March 28th 2021</div>
      <div>
        <h2>Car Insurance</h2>
        <div>$294.67</div>
      </div>
    </div>
  );
};

export default ExpenseItem;

# ExpenseItem.js

그리고 app.js 에서 ExpenseItem를 import하여 불러올 수 있다.

import "./App.css";
import ExpenseItem from "./components/Expenseltem";

function App() {
  return (
    <div className="App">
      <h2>Let's get started!</h2>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}

export default App;

# App.js

 

로컬 호스트 3000 에서 새로고침 하여 import와 export가 잘 적용되었는지 확인한다.

localhost:3000

---

3. css 스타일 추가

css 파일을 만들어 해당 컴포넌트에 import해주면 된다.

.expense-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
... 이하 생략

# ExpenseItem.css

주의할 점은 리액트에서는 태그에 class를 주려면 className으로 작성해야한다.

import "./ExpenseItem.css";

const ExpenseItem = () => {
  return (
    <div className="expense-item">
      <div>March 28th 2021</div>
      <div className="expense-item_description">
        <h2>Car Insurance</h2>
        <div className="expense-item_price">$294.67</div>
      </div>
    </div>
  );
};

export default ExpenseItem;

# ExpenseItem.js