jsx
[ React ] 리액트 JSX TIP
본래 리액트에서 리액트 엘리먼트를 생성할 때 React 가 가지고 있는 createElement 메서드를 통해 생성해낸다. color 라는 id 를 가졌으며 text 는 "빨강" 을 집어넣은 엘리먼트 h1 태그를 만들 때 아래와 같이 만들어낸다. React.createElement("h1", {id: "color", 'data-type': "title"}, "빨강"); // 빨강 createElement 로 엘리먼트를 만들 경우 빨강 처럼 data-reactroot 가 붙게 되는데 이는 리액트 컴포넌트의 루트 엘리먼트를 식별해주는 애트리뷰트이다. 여튼 이처럼 리액트에서 엘리먼트를 생성할 때 createElement 를 사용하곤 했는데 매번 엘리먼트를 생성할 때마다 React.createEl..
[ React ] 리액트 JSX 문법 규칙 및 유용한 플러그인
리액트를 사용할 때 JSX 문법을 사용하는데 이는 HTML과 굉장히 유사하게 생겼다. 하지만 HTML 은 분명히 아니며 이를 닮은 JavaScript Xml 임을 명심해야한다. 이러한 JSX 문법을 사용하려면 우리는 몇 가지 규칙을 지켜주어야 문제없이 돌아가게 되는데, 그 중 제일 중요한 몇 가지만 살펴보자. 이 두 가지만 지켜주어도 왠만하면 돌아간다. 1. 태그는 열었으면 반드시 닫아주어야 한다. 뭔 말인가 하면 우리는 Html 에서 input 태그 같은건 안닫는 경우가 종종 있다. Html 에서는 닫지 않아주어도 잘 돌아가기때문에 문제가 없었겠지만 JSX에서는 안 닫아주면 compile error 가 발생한다. 꼭 닫아주도록 하자. 2. 두 개 이상의 태그가 존재하면 하나의 태그로 감싸주어야 한..