📝 JSX란?

JSX는 JavaScript XML의 약자로 함수 호출과 객체 생성을 위한 문법적 편의를 제공하여 UI 개발의 편의성을 느끼게 해주는 JavaScript 문법의 확장본이다.
✔ XML은 HTML의 한계를 극복하기 위해 만들어진 마크업 언어

🎯 JSX의 특징

• HTML 태그 내에 JavaScript 연산

• class → className

• 스타일은 object이며 camelCase로 작성

• 닫는 태그 필수 ex) <br />

• 최상단 element는 반드시 하나만 작성 가능, <div> 또는 <React.Fragment>를 사용하고 실제 렌더링 시에는 는 Fragment 안에 있는 내용만 출력. <React.Fragment>는 간단히 <> 로 표기 가능.

• JSX 코드는 브라우저가 이해하지 못하기 때문에 Babel에 의해서 Transcompile됨

const App = () => {
	return (
    	<div className="App">
        	<header>
            	<img src={logo} className="App-logo" alt="logo" />
                <h1>Welcome to React</h1>
            </header>
            <p style={{ color: 'blue', bakcgroundColor: 'black' }}>
            	Hello World
            </p>
        </div>
    )
}

📈 JSX의 장점

1. 개발자 편의성 향상
2. 협업에 용이하고 생산성 향상
3. 문법 오류와 코드량 감소

---

📝 Component란?

React에서 페이지를 구성하는 최소단위로 사용자가 만들 수 있는 태그이자 재사용 할 수 있는 UI 함수이다.

🎯 Component의 특징

• Component의 이름은 대문자로 시작

• Class Component(클래스형 컴포넌트) / Function Component(함수형 컴포넌트) 로 나뉨

  Class Component 특징

  1. Class 개념이 많이 활용되는 Java 개발자에게 친숙한 형태이다.
  2. React의 생명주기를 파악하기 쉽다.

• Controlled Component / Uncontrolled Component

• 컴포넌트에 Attribute에 해당하는 부분을 Props(Properties)라고 한다. 컴포넌트 안에 작성된 하위 Element는 children라고 하는데 children도 결국엔 props 중 하나이다.

• 엘리먼트란 React 앱의 가장 작은 단위로 컴포넌트의 구성요소이다. 엘리먼트는 화면에 표시할 것들을 기록하는 것으로 쉽게 말하자면 HTML 요소라고 할 수 있다.

• 컴포넌트 안에서 다른 컴포넌트를 참조하는 것이 가능하다.

Class Component(클래스형 컴포넌트)와 Function Component(함수형 컴포넌트)

함수형 컴포넌트

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

• 함수형 컴포넌트는 단순히 HTML UI를 반환하는 간단한 자바스크림트 함수로 자주 사용된다. 단순히 데이터를 받고 렌더링을 하면 끝이기 때문에 비상태형 컴포넌트라고도 한다.
• State를 사용하지 않고 함수에 대한 결과를 반환하는데, State는 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다. 즉, 컴포넌트에 현재 저장된 값이 State이다.

클래스형 컴포넌트

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

• 클래스형 컴포넌트는 상태를 구현할 때 사용되어 상태형 컴포넌트라고 한다. HTML을 반환하는 render() 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트가 사용된다. 특히 위에서 언급한 State를 사용할 때 반드시 클래스형 컴포넌트로 구현이 되어야 한다.

❗❗ React 16.8 버전부터 Function Component에서 Hook을 통해 State를 사용할 수 있다.

📈 Component 구조의 장점

• 각각의 모듈로 분리되어 있기 때문에 개발자는 필요한 컴포넌트만 가져와서 사용할 수 있다.
• 유지보수하기 쉽다.
• 가독성이 좋아진다.
• 재사용이 가능하여 메모리와 연산 비용을 아낄 수 있다.