[React] JSX, 컴포넌트

DevSeong2·2021년 4월 7일

목록 보기

5/5

JSX ?

JavaScript XML의 줄임말로 '자바스크립트에 XML을 추가한 확장형 문법'.
JSX의 중괄호 안에는 JavaScript 표현식을 넣을 수 있습니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

리액트 엔진은 JSX의 구조를 분석하여 자바스크립트 함수 코드로 변환합니다.
JSX는 Babel(컴파일러)에 의해서 React.createElement() 호출로 컴파일됩니다.

const element = React.createElement(
  "h1", 
  null, 
  "Hello, ", 
  name
);

객체 모델 함수 사용법을 HTML과 같은 방법으로 작성할 수 있게 도와주는 방식이 JSX 표현식입니다. 개발자는 JSX만 작성하면 리액트 엔진이 자바스크립트로 해석해주기 때문에 개발자가 화면 구성에만 집중할 수 있게 됩니다.
(+) 주석처리는 /* */

엘리먼트는 React 앱의 가장 작은 단위입니다.
엘리먼트는 화면에 표시할 내용을 기술합니다.

React 엘리먼트는 생성한 이후에는 변경되지 않습니다. React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다.

컴포넌트는 HTML을 반환하는 함수라고 생각해봅시다. props라고 하는 입력을 받고 React 엘리먼트를 반환하는 함수. (props는 이후에 다시 설명하겠습니다.)

React 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있어 단순한 컴포넌트를 사용하여 복잡한 UI를 구현할 수 있습니다.
🚨 컴포넌트의 이름은 항상 대문자로 시작합니다. 소문자로 작성하면 HTML 태그로 인식하기 때문!

const element = <Welcome name="Sara" />;
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다.

상위 컴포넌트가 하위 컴포넌트에 값을 속성 형태로 전달할 수 있습니다. 이 객체는 불변 객체로 컴포넌트 내부에서 값을 수정❌

프로퍼티는 값을 변경할 수 없었습니다. 값을 변경해야하는 경우에 바로 state를 사용합니다. state는 값을 저장하거나 변경할 수 있는 객체입니다.

차근차근