jsx란?

Web/React

[React] 3. JSX 문법 | 민민의 하드디스크 - 티스토리

JSX 문법에 대해 리액트 공부를 하며, JSX를 처음 접해본다. 사용하기 위해선 규칙을 알아야 하기 때문에 정리를 해봤다. 1. 감싸인 요소 컴포넌트 함수 내부에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 태그를 사용해도 되고, 리액트 v16이상이라면 태그를 사용할 수 있다. 잘못된 예시 function App(){ return ( 문단1 문단2 ) } 감싸주지 않는다면 오류가 발생한다. 올바른 예시 function App(){ return ( 문단1 문단2 ) } 여기서 ~ 를 ~ 또는 ~ 로 써도 무방하다. 2. 자바스크립트 표현 JSX는 DOM 요소 렌더링 기능뿐 아니라, 자바스크립트 표현식을 사용할 수 있다. function App() { let name= '민민의 하드디스크';..

Web/React

[React] 2. 리액트에서 JSX란? | 민민의 하드디스크 - 티스토리

리액트 소스 코드 이해하기 및 JSX에 대해 1. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 기본적으로 제공되는 App.js 코드이다. 리액트는 얼핏보면 파이썬 같기도 하지만 자바스크립트 라이브러리이다. import: 다른 파일들을 불러와서 사용할 수 있으며, 원래 브라우저에서는 없던 기능이며 Node.js에서 지원하는 기능이다. function App(): 기본적으로 function은 함수라고 하는데, 위 코드에서는 함수의 return(반환) 값이 HTML인 마크업 언..

민민2
'jsx란?' 태그의 글 목록