JavaScript/React(3)
-
3. 리액트, 엘리먼트 렌더링
1. React 엘리먼트란 무엇인가? JSX 문법으로 작성한 표현식을 Babel이 React.createElement() 함수 호출로 컴파일하여 나온 객체를 React 엘리먼트라고 합니다. 아래의 두 코드는 동일한 코드입니다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); React.createElement() 함수 호출로 나온 객체는 아래와 같습니다. // 주의: 다음 구조는 단순화되었습니다 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, ..
2021.08.03 -
2. 리액트, React, JSX 문법 소개
1. React란 무엇인가? 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 생성하기 위해 사용된다. 리액트는 싱글 페이지 애플리케이션(Single Page Application, SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다. 2. JSX란? JSX란 JavaScript eXtension의 약자로 자바스크립트의 확장 버전이다. JSX는 HTML 태그를 자바스크립 코드 내부에 작성할 수 있는 버전이다. 3. JSX에 표현식 포함하기 App.js function App2(){ const name = 'yonghwan kim'; const element = Hello, {name}; return ( {element} ); } expor..
2021.08.03 -
1. 리액트, 설치 및 프로젝트 생성
1.1 리액트(React) 설치 과정 Node JS 최신버전 설치 Node JS를 설치하면 NPM(Node Package Manager)가 같이 설치된다. NPM은 React 개발에 필요한 다양한 모듈들을 다운받아 설치할 수 있다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optim..
2021.08.03