🔫 React_01 React component, JSX

🎮 My first React component

🎲 Hello.js

import React from "react";

function Hello() {
  return <div>안녕하세요</div>;
}

export default Hello;

• import React from "react"; : 리액트 컴포넌트를 만들땐 리액트를 불러와야 한다.
• export default Hello; : 'Hello'라는 컴포넌트를 내보내겠다는 의미

🎲 App.js

• 컴포넌트 : 일종의 UI 조각으로 쉽게 재사용할 수 있다.

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

🎲 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

• ReactDOM.render : 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 의미
• document.getElementById("root") : public/index.html 내부의 <div id="root"></div>
  => 리액트 컴포넌트가 렌더링 될 때, 렌더링된 결과물 위 div 내부에 렌더링 되는 것

🎮 JSX의 기본 규칙

• JSX는 리액트에서 생김새를 정의할 때, HTML과 비슷해 보이지만 실제로는 JavaScript이다.

🎲 꼭 닫혀야 하는 태그

• 태그는 꼭 닫혀있어야 한다.
• 태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing 태그를 사용한다.

🎲 꼭 감싸져야하는 태그

• 두 개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다.

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

• 단순히 감싸기 위해 불필요한 div를 사용하는 것이 좋지 않을 수 있다.
  => 이럴 땐 리액트의 Fragment<></>를 사용하면 된다.
  => Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

🎲 JSX 안에 자바스크립트 값 사용하기

• JSX 내부에 자바스크립트 변수를 보여줘야 할 때 {}을 감싸서 보여준다.

import React from "react";
import Hello from "./Hello";

function App() {
  const name = "react";
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

🎲 style 과 className

• 인라인 스타일은 객체 형태로 작성
• background-color 처럼 -로 구분되어 있는 이름은 backgroundColor처럼 camelCase 형태로 네이밍
• class 명을 지정할 때 className=로 지정

import React from "react";
import Hello from "./Hello";
import "./App.css";

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: "white",
    fontSize: 24, // 기본 단위 px
    padding: "1rem", // px 이외의 단위 사용시 문자열로 설정
  };

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

🎲 주석

• JSX 내부 주석 형태 : {/* 주석 내용 */}
• 열리는 태그 내부에서 주석 형태 : // 주석 내용

참고

• 벨로퍼트와 함께하는 모던 리액트