⚛️ JSX, 컴포넌트(Component) 개요

 

JSX

JSX란?

• 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JS의 확장
• HTML과 비슷한 개발 경험을 제공하나 JS,HTML과는 다름
• JS는 Babel에 의해서 Transcompile 되어 JS가 된다

 

JSX의 장점

• 개발자 편의성 향상
• 협업에 용의 / 생산성 향상
• 문법오류와 코드량 감소

 

JSX 특징 / HTML과의 차이점

• HTML 태그 내에 JS 연산
• class -> className
• 스타일은 object로
• 닫는 태그 필수
• 최상단 element는 반드시 하나 (간단히 <> 라고 입력해도 됨)

 

JSX 예시

const element = (
  <div>
    <h1>Hello,</h1>
    <h2>elice!</h2>
  </div>
);

객체 표현 방식으로도 가능은 하지만 안 쓰임 (Babel에 의해 객체 표현으로 바뀜)

 

엘리먼트 렌더링

ReactDOM.render(element, document.getElementById('root'));

 

 

컴포넌트

Component란?

• React에서 페이지를 구성하는 최소단위
• Component의 이름은 대문자로 시작
• Class Component / Function Component로 나뉨
• Controlled Component / Uncontrolled Component

Class 컴포넌트 : 자바 개발자에게 친숙, React의 생성주기를 파악하기 쉽다

 

컴포넌트의 특징

• 컴포넌트끼리 데이터 주고받을 때는 Props
• 컴포넌트 내에서 데이터 관리할 땐 State
• 데이터는 부모에서 자식으로만 전달

 

컴포넌트 예시

클래스형 컴포넌트

class Introduce extends React.Component {
  render() {
    return <h2>Hello World!</h2>;
  }
}

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

 

함수형 컴포넌트

function Introduce() {
  return <h2>Hello World!</h2>;
}

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

function Introduce(props) {
  return <h1>Hello, {props.word} World!</h1>;
}

const element = <Introduce word="cruel" />;
ReactDOM.render(element, document.getElementById('root'));