Yoo HeehyeonYoo Heehyeon

1. JSX (JavaScript XML)

JSX는 자바스크립트 안에서 HTML처럼 보이는 문법을 쓰게 해주는 확장 문법이다. 보기에는 HTML 같지만, 실제로는 자바스크립트 표현식이다.

브라우저는 JSX를 그대로 이해하지 못하므로, 빌드 단계에서 Babel 같은 도구가 React.createElement() 호출로 변환한다.

// 우리가 작성하는 코드
const element = <h1>Hello, world!</h1>;

// 실제 변환된 코드
const element = React.createElement('h1', null, 'Hello, world!');

2. 컴포넌트 (Component)

컴포넌트는 UI를 재사용 가능한 단위로 쪼갠 것이다. 가장 단순하게 보면, Props를 받아 화면을 반환하는 함수라고 이해하면 된다.

3. Props와 State

리액트에서 데이터 흐름을 볼 때는 Props와 State를 먼저 구분해야 한다.

3.1. Props (Properties)

• 부모 컴포넌트가 자식에게 내려주는 데이터다.
• 자식 입장에서는 읽기 전용이다. 직접 수정하면 안 된다.
• 함수의 매개변수처럼 받아서 사용하는 값이라고 보면 된다.

3.2. State (상태)

• 컴포넌트 내부에서 직접 관리하는 데이터다.
• 시간 흐름이나 사용자 입력에 따라 바뀔 수 있다.
• State가 바뀌면 리액트는 해당 컴포넌트와 필요한 하위 UI를 다시 렌더링한다.