React : Component와 JSX

1. Component

• Component는 React의 핵심이며, 화면을 구성하는 하나의 부분이다.
• 내부 데이터를 변경하여 전체적인 UI 틀을 재사용할 수 있다.
• UI를 재사용 가능한 개별적인 조각으로 나누고, 각 조각을 독립적으로 분리 가능하다.
• Component는 다음과 같은 역할을 한다:
  1. 재사용되는 UI 부분을 담당.
  2. 페이지의 특정 섹션(예: Header, Footer)을 담당.
  3. 페이지 전체를 담당.

---

2. Component의 트리 구조

• Component는 트리 형태로 구성된다.

  

• Component는 크게 두 가지 유형이 있다:
  1. 클래스형 컴포넌트(Class Component)
     • render 함수를 반드시 사용해야 한다.
     • 컴포넌트의 생명 주기(lifecycle) 기능을 포함한다.
     • 기존 Component 클래스를 상속받아 사용한다.
  2. 함수형 컴포넌트(Functional Component)
     • 짧고 직관적이며, 사용법이 간단하다.
     • 메모리 사용이 효율적이다.
• 변화: React 16.8부터 hooks가 도입되어 함수형 컴포넌트에서도 상태 관리와 생명 주기 기능을 사용할 수 있다.
• 현재는 더 간단한 문법을 가진 함수형 컴포넌트의 사용 비율이 높다. (컴포넌트의 이름은 PascalCase 사용)
  

---

3. Component 작성 방식

1) 클래스형 컴포넌트

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      <h1>Class Component 입니다.</h1>
    );
  }
}

export default ClassComponent;

2) 함수형 컴포넌트

const FunctionComponent = () => {
  return (
    <div>Function Component 입니다.
    </div>
  );
}

export default FunctionComponent;

---

4. JSX

• JSX는 JavaScript + XML 문법이다.
• JavaScript를 확장한 문법으로, XML과 유사하다.
• Babel을 이용해 일반 JavaScript 코드로 변환된다.

!! JSX의 기본 규칙 !!

1) 전체는 하나의 태그로 감싸야 한다.

• html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로 만들어야한다.
  ( 왜냐하면 Virtual DOM에서 컴포넌 트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문!! )
• 여러 태그를 반환할 때는 ()로 묶어 내부에 작성 해야 한다.
• 예:

  function App() {
  	const str = 'hello'
  	
    return (
      <div className='App'>
        <h1>{str}</h1>
        <p>Learning JSX</p>
      </div>
    );
  }
  export default App;

2) JavaScript 코드 사용

• JSX 내부에서 JavaScript를 사용하려면 {}로 감싸야 한다.
• 조건문은 삼항 연산자만 사용할 수 있으며, if 문, for 문은 사용할 수 없다. (for문과 if문을 사용하고 싶으면 return 이 오기 전에 결과값을 저장하고 사용하면 됨)
  
• 예:

  const str = 'hello';
  return (
    <div className='App'>
  	  <span>{str}</span>
      <span>{str === 'hello' ? 'world' : '세상'}</span>
  	    <div>
  		    {str === 'hello' ? (<div><h2>react</h2></div> : <div><h2>리엑트</h2></div>)}
  	    </div>
    </div>
  );

3) 스타일링

• JSX에서 CSS는 인라인 스타일 형태로 작성하며, 객체(object)로 표현한다.
• CSS 속성은 camelCase 형식으로 작성해야 한다.
• 예:

  const style = { fontSize: '20px', color: 'blue' };
  return <div style={style}>Styled Text</div>;

4) 클래스와 이벤트

• HTML의 class는 JSX에서 className으로 작성한다.
• 이벤트는 onClick 등 camelCase로 작성한다.
• 예:

  return (
    <div className="App" onClick={() => alert('Clicked!')}>
      Click Me
    </div>
  );

5) Self-closing 태그

• 빈 태그는 반드시 self-closing 태그로 작성해야 한다.
  ( 우리가 html에서 굳이 닫지 않아도 되는 <img>, <input>태그들도 다 닫아줘야한다.)
  
• 예:

  return (
    <div>
      <img src="image.png" alt="example" />
    </div>
  );

6) 주석 작성

• JSX 내부에서는 {/* ... */}로 주석을 작성한다.
• 예:

  return (
    <div>
      {/* This is a comment */}
      <p>JSX 주석 예시</p>
    </div>
  );

---

5. 디버깅

• React는 치명적인 에러 발생 시, 에러 메시지를 화면에 표시한다.
• Strict Mode를 통해 더 엄격한 검사를 제공한다.
• 에러 메시지를 잘 읽고 문제를 파악하는 것이 중요하다.

---

React의 핵심 요약

• Component는 화면을 구성하는 핵심 단위로, 재사용 가능하고 독립적이다.
• JSX는 JavaScript와 XML의 결합 문법으로, HTML과 JavaScript를 함께 작성할 수 있다.
• React의 디버깅 도구는 친절하며, 에러 원인을 명확히 알려준다.