리액트 기초 01 - 핵심 요소 1 : JSX의 기본적 사용법

• 함수형 컴포넌트 권장

// 기본적인 함수형 컴포넌트
function App() {
  return (
    <div>
      Hello World
    </div>
  );
}

// 화살표 함수로도 작성 가능
const App = () => {
  return (
    <div>
      Hello World
    </div>
  );
}

• 기본적으로 화면에 표시되는 것은 1가지 내용

export default App; //디폴트로 해당 함수를 화면에 표시함

• 하나의 파일에서 여러개의 컴포넌트 사용 가능
• 기존의 통합함수처럼 여러개의 함수를 분리하고 한번에 호출해서 디폴트 화면을 구성

// App.js
function Header() {
  return <header>This is header</header>;
}

function Main() {
  return <main>This is main content</main>;
}

function Footer() {
  return <footer>This is footer</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;

• 여러 파일로 분리해서 구현도 가능함
• export로 내보내기(수출) import로 가져오기(수입)

// Header.js
export function Header() {
  return <header>This is header</header>;
}

// Main.js
export function Main() {
  return <main>This is main content</main>;
}

// Footer.js
export function Footer() {
  return <footer>This is footer</footer>;
}

// App.js
import { Header } from './Header';
import { Main } from './Main';
import { Footer } from './Footer';

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;

• export (내보내기)
  • 자바스크립트 모듈에서 다른 파일에서 사용할 수 있도록 값, 함수, 클래스 등을 외부로 내보내는 것
•  import (가져오기)
  • 다른 파일에서 내보낸 값, 함수, 클래스 등을 현재 파일로 가져오는 것

JSX를 사용할 때 주의해야 할 기본적인 사항

1. Root 엘리먼트 반드시 존재해야 함:

• JSX 코드는 반드시 하나의 루트 엘리먼트를 가져야 합니다.
• 여러 개의 엘리먼트를 반환하려면 `<div>`, `<React.Fragment>` 등으로 감싸야 합니다.

2. 자식 엘리먼트는 반드시 닫혀야 함:

• 자식 엘리먼트는 반드시 닫혀 있어야 합니다.
• 빈 태그는 `/>` 로 닫아야 합니다.
• 예를 들어, HTML에서는 <br> 태그와 같이 자체적으로 닫히는 태그가 있지만, JSX에서는 이런 태그도 반드시 <br />와 같이 닫혀 있어야 합니다.

3. JSX 표현식 사용 시 중괄호 사용:

• JSX 내부에서 자바스크립트 표현식을 사용하려면 중괄호 `{}` 로 감싸야 합니다.

4. className 대신 class 사용 금지:

• HTML의 `class` 대신 JSX에서는 `className`을 사용해야 합니다.

5. camelCase 사용:

• HTML 태그의 속성은 camelCase 표기법을 사용해야 합니다.
• 예: `onClick`, `onSubmit`, `htmlFor` 등

6. 자식 컴포넌트는 반드시 하나의 엘리먼트로 감싸야 함:

• 여러 개의 자식 컴포넌트를 반환하려면 반드시 하나의 엘리먼트로 감싸야 합니다.

7. 주석 작성 시 주의:

• JSX 내부에서 주석은 `{/* 주석 내용 */}` 형태로 작성해야 합니다.

8. 조건부 렌더링 시 주의:

• 조건부 렌더링은 `if-else`, 삼항 연산자, 논리 연산자 등을 사용하여 구현할 수 있습니다.
• 이러한 JSX 사용 시 주의사항을 숙지하면, 리액트 개발 시 발생할 수 있는 문법 오류를 방지할 수 있습니다.