예산 계산기 앱 소개 및 JSX

예산 계산기 애플리케이션

예산 계산기 애플리케이션을 만들면서 리액트의 기본적인 것 들을 학습
이 애플리케이션은 지출 항목을 추가 삭제 수정 할 수 있는 앱 입니다.

JSX(Javascrip syntax extension) 알아보기

JSX는 자바스크립트의 확장 문법입니다.
리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내줍니다.

리액트에서 JSX 사용은 의무인가요?

의무는 아니지만 자바스크립트 안에서 UI 작업을 하는데 너무 편리하기 때문에 React를 사용할 때는 거의 모든 사람이 JSX를 사용합니다.

원래 리액트에서 화면을 그리는 방식

react.createElement API를 사용해서 엘리먼트를 생성한 후 (객체가 된다) 이 엘리먼트를 In-Memory에 저장합니다.
그리고 ReactDOM.rebder 함수를 사용해서 실제 웹 브러아주에 그려줍니다.

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.rebder(myelement, document.getElementById('root'));

babel 주소

JSX는 createElement를 쉽게 사용하기 위해 사용

모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들 수는 없다. 그러기에 JSX를 사용한 후 그걸 바벨이 다시 createElement로 바뀌서 사용한다,

JSX를 사용하면서 주의해야 할 문법들

JSX를 사용하면서 지켜줘야 할 규칙들이 많습니다.
처음으로는 JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 합니다.

// 잘못된 코드
function hello() {
	return (
    	<div>Hello world!</div>
        <div>what are you doing</div>
    )
}

// 올바른 코드
function hello() {
	return <div>
    	<div>Hello world!</div>
        <div>what are you doing</div>
    </div>
}

이것 이외에도 많다.