리액트 기본 - JSX, 컴포넌트, 이벤트와 스타일

1. JSX 표기법

• JSX 표기법에서는 함수의 반환 값을 HTML 태그를 기술할 수 있고 그것을 컴포넌트로 다뤄 화면을 구성한다.
• public/index.html

• src/index.js

// react-dom 라이브러리에서 ReactDOM이라는 이름으로 모듈을 import 한다.
import ReactDOM from "react-dom";
// 함수 정의
const App = () => {
  // return null;
  return <h1>두밧두 와리와리</h1>;
};
// 첫번째 인수 render 대상, 두번 째 인수 render 위치
// 리액트에서는 함수명을 HTML과 같이 태그로 감싸서 컴포넌트로 다룰 수 있다.
ReactDOM.render(<App />, document.getElementById("root"));

• return 이후 행이 여러 행일 경우 ()로 감싼다.
• return 이후 한개의 태그로 둘러싸여 있어야한다.(에러 방지) div로 감싼다.

// react-dom 라이브러리에서 ReactDOM이라는 이름으로 모듈을 import 한다.
import ReactDOM from "react-dom";
// 함수 정의
const App = () => {
  // return 이후 행이 여러 행일 경우 ()로 감싼다.
  // return 이후 한개의 태그로 둘러싸여 있어야한다. div로 감싼다.
  return (
    <div>
      <h1>두밧두 와리와리</h1>
      <p>휴닝이 마카오 감</p>
    </div>
  );
};
// 첫번째 인수 render 대상, 두번 째 인수 render 위치
// 리액트에서는 함수명을 HTML과 같이 태그로 감싸서 컴포넌트로 다룰 수 있다.
ReactDOM.render(<App />, document.getElementById("root"));

 

Fragment 사용

1) react에서 Fragment를 import해서 사용

import ReactDOM from "react-dom";
import { Fragment } from "react";

const App = () => {
  return (
    <Fragment>
      <h1>휴닝카이</h1>
      <p>마카오 감</p>
    </Fragment>
  );
};

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

 

2) 생략표기법(빈 태그) 사용

• div 태그 와 달리 이 표기법들은 불필요한 DOM을 생성하지 않는다. 에러를 피하기 위해 바깥쪽을 감싸고 싶은 경우 등에 효과적으로 사용할 수 있다.

import ReactDOM from "react-dom";
//import { Fragment } from "react";

const App = () => {
  return (
    <>
      <h1>휴닝카이</h1>
      <p>마카오 감</p>
    </>
  );
};

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

2. 컴포넌트 사용 방법

화면에 관련된 코드를 모두 index.js에 작성하면 코드양이 기하급수적으로 늘어나게 된다. 리액트 개발에서는 기본적으로 화면 요소를 다양한 수준의 컴포넌트로 분할함으로써 재사용성과 유지보수성을 높인다.

리액트 개발에서는 각 파일에 컴포넌트를 정의하고, 다른 파일에서 읽어 부품을 조합하는 것처럼 화면을 만들어간다.

컴포넌트 분할

• src/App.js

// 다른 파일에서도 사용할 수 있도록 export 한다.
// export 한것을 import 하면 다른 파일 안에서 사용할 수 있다.
export const App = () => {
  return (
    <>
      <h1>두밧두 후쿠오카</h1>
      <p>막콘 9/15</p>
    </>
  );
};

• src/index.js

import ReactDOM from "react-dom";
import { App } from "./App";

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

컴포넌트 파일의 확장자

리액트 내부에는 자바스크립트가 움직이고 있기 때문에 .js라는 확장자로 작동한다.

기본적으로 컴포넌트 파일의 확장자는 .jsx를 사용할 것을 권장한다.

 

3. 이벤트와 스타일

리액트에서는 이벤트를 카멜케이스로 표기한다.

JSX에 작성되어 있는 HTML 태그 안에서는 return 이후 { } 로 감싸서 자바스크립트를 작성한다.

• 태그 안 작성 방법

• src/App.jsx

// 다른 파일에서도 사용할 수 있도록 export 한다.
// export 한것을 import 하면 다른 파일 인에서 사용할 수 있다.
export const App = () => {
  // 버튼 클릭 시 실행되는 함수 정의
  const onClickButton = () => {
    alert("콘서트 가고 싶다!");
  };
  return (
    <>
      <h1>두밧두 후쿠오카</h1>
      <p>막콘 9/15</p>
      <button onClick={onClickButton}>버튼</button>
    </>
  );
};

• CSS의 각 요소는 자바스크립트 객체로 기술한다.
• style={{ 키: "값" }}
• 자바스크립트 객체로 지정할 수 있으므로 사전에 정의해둔 함수를 할당할 수 있다.
• 자바스크립트의 객체 속성명에는 - (하이픈)을 허용하지 않으므로 CSS 속성명도 카멜 케이스로 작성한다.

• src/App.jsx

// 다른 파일에서도 사용할 수 있도록 export 한다.
// export 한것을 import 하면 다른 파일 안에서 사용할 수 있다.
export const App = () => {
  // 버튼 클릭 시 실행되는 함수 정의
  const onClickButton = () => {
    alert("콘서트 가고 싶다!");
  };

  // CSS 객체
  const contentStyle = {
    color: "blue",
    fontSize: "20px",
  };

  return (
    <>
      <h1 style={{ color: "red" }}>두밧두 후쿠오카</h1>
      <p style={contentStyle}>막콘 9/15</p>
      <button onClick={onClickButton}>버튼</button>
    </>
  );
};