728x90

안녕하세요!
오늘은 여러분에게 리액트라는 재미있는 프로그램을 알려드릴게요:)

리액트는 우리가 웹사이트를 쉽게 만들 수 있게 도와주는 도구예요. 이제, 리액트로 컴포넌트를 어떻게 만드는지 함께 배워볼까요?

그전에 먼저,,!

HTML이란 무엇인가요?

HTML은 웹사이트를 만드는 기본적인 언어예요. 여기 작은 예시가 있어요:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>HTML 예제</title>
  </head>
  <body>
    <h1>내 웹사이트</h1>
    <p>여기는 소개 내용을 쓰는 곳이에요.</p>
  </body>
</html>

위의 예시는 우리가 웹사이트를 만들 때 사용하는 HTML이에요. HTML은 매우 간단하고, 우리가 무슨 내용을 넣을지 쉽게 알 수 있어요.

리액트에서 컴포넌트 만들기

리액트에서는 우리가 웹사이트를 조각조각 나눠서 만들 수 있어요. 이 조각을 "컴포넌트"라고 해요. 두 가지 방법으로 컴포넌트를 만들 수 있어요! createElement를 사용하는 방법과 JSX를 사용하는 방법이 있어요.

CreateElement

리액트가 처음 나왔을 때는 createElement를 사용해서 컴포넌트를 만들었어요. 예를 들어, 아래와 같이 작성했어요

import { createElement } from 'react';

function Greeting() {
  return createElement('h1', { className: 'greeting' }, '안녕하세요, 리액트!');
}

이 코드에서는 createElement를 사용해서 "안녕하세요, 리액트!"라는 문구가 들어간 h1 태그를 만들었어요.

 

JSX

JSX는 리액트를 더 쉽게 사용하기 위해 만든 특별한 문법이에요. HTML과 비슷해서 더 이해하기 쉽답니다. 예를 들어, 같은 Greeting 컴포넌트를 JSX로 작성하면 이렇게 돼요:

function Greeting() {
  return <h1 className="greeting">안녕하세요, 리액트!</h1>;
}​

어때요? createElement를 사용하는 것보다 더 간결하고 읽기 쉽죠? 그래서 우리가 컴포넌트를 더 쉽게 만들 수 있어요.
더보기
더보기

🤚🏻잠깐 JSX가 뭐에요?

JSX => Java Script XML의 줄임말입니다. JSX는 자바스크립트에 XML/HTML 같은 구문을 포함할 수 있도록 하는 확장 문법입니다.

그러면 XML은 뭘까요?

XML은 Extensible Markup Language의 줄임말로, 데이터를 구조화하고 저장하는 데 사용되는 마크업 언어입니다. XML은 사람과 기계 모두가 읽을 수 있는 형식으로 데이터를 표현하며, 주로 데이터를 교환하는 표준 형식으로 사용됩니다.

 

JSX 사용 규칙

JSX를 사용할 때는 몇 가지 규칙이 있어요. 함께 알아볼까요?

1. 하나의 루트 태그로 감싸기
JSX는 하나의 루트 태그로 감싸져 있어야 해요.

* 루트 태그는 문서 내의 다른 모든 요소를 포함하는 최상위 태그 

// Bad
const App = () => {
  return (
    <h1>안녕하세요!</h1>
    <p>리액트를 배워봐요!</p>
  );
}

// Good  <div></div>가 루트태그
const App = () => {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>리액트를 배워봐요!</p>
    </div>
  );
}

2. 태그를 꼭 닫아주세요
모든 태그는 닫혀 있어야 해요.

// Bad
const App = () => {
  return <br>;
}

// Good
const App = () => {
  return <br />;
}

3. 중괄호 사용하기
자바스크립트 표현식은 {} 안에 넣어요.

const App = () => {
  const name = "철수";
  return <h1>안녕하세요, {name}!</h1>;
};

4. class 대신 className 사용하기
class 속성 대신 className을 사용해요.

const App = () => {
  return <div className="wrap">안녕하세요!</div>;
};

5. 컴포넌트 이름은 대문자로 시작하기
함수형 컴포넌트의 이름은 항상 대문자로 시작해요.

// Bad
const app = () => {
  return <div>안녕하세요!</div>;
};

// Good
const App = () => {
  return <div>안녕하세요!</div>;
};
728x90

'웹개발 > REACT' 카테고리의 다른 글

리액트에서 map함수 사용하기  (0) 2024.07.25
리액트 컴포넌트에 CSS 스타일링하는 방법과 vite기반의 tailwind주소  (0) 2024.07.25
리액트 컴포넌트, 아직도 클래스형 쓰는 사람? 이 글 읽고 손절하자!  (3) 2024.07.24
리액트 확장자명 헷갈리면 들어와! / .js, .jsx, .tsx  (0) 2024.07.24
바벨과 웹팩, Vite의 역할: 리액트 개발에서의 필수 도구 이해하기  (2) 2024.07.23

티스토리툴바