React 시작하기, JSX, JSX기본규칙

 

21.02.03

 

1. 환경 설치

   Node.js설치, Yarn 설치(선택사항, npm 사용 가능)

   터미널로 react폴더를 만들 폴더로 들어가서 'npx create-react-app 생성할react폴더이름' 입력

   폴더가 만들어지면 그 폴더로 들어가서 터미널창에 yarn start or npm start 입력 

 

2. 컴포넌트 만들기

   리액트에서 컴포넌트는 클래스 또는 함수의 형태로 만들 수 있다.

   src아래에 파일을 만든다.

   리액트 컴포넌트를 만들 때는 import React from 'react';를 꼭 써주어야 한다.

   최하단에 export default 함수명or클래스명; 을 써주면 컴포넨트를 내보낼 수 있고 다른 컴포넌트에서 사용할 수 있다.

src아래에 Hello.js라는 코드를 만들어 Hello()컴포넌트를 만들었다.

 

         * 리액트에서는 xml형태의 값을 반환할 수 있다. 이것을 JSX라고 부른다.

 

3. 컴포넌트 사용해보기

   위에서 만든 Hello컴포넌트를 사용하기 위해서는 App.js에 import Hello from './Hello'; 와 React를 추가해야 한다.

   Function안의 최상단 div를 제외하고 모두 없애준뒤 <Hello />코드를 추가한다.

   css와 sgv파일은 필요 없으니 주석처리 하였다.

결과 : Hello 컴포넌트의 return값 '안녕하세요'가 아까 띄운 localhost:3000에 뜬다.

 

4. index.js

   ReactDOM.render() : 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미한다.

   index.js에서는 id가 'root'인 DOM에 랜더링을 하도록 되어있다.

   id가 root인 DOM은 public/index.html안에 있다.

src/index.js

public/index.html

 

5. JSX의 기본규칙

   태그는 꼭 닫혀야 한다.(html에서는 input 등 닫지 않아도 되는 태그들이 있지만 react에서는 안됨)

   두 개 이상의 태그는 꼭 하나으 다른 태그로 감싸져있어야 한다.

   JSX내부에 js의 변수를 나타내야 할 때는 {}(대괄호)로 감싸주면 된다.

   style을 지정할때는 camelCase형태로 지정한다. ex) background-color -> backgroundColor

   태그 내부에서는 //로 주석처리를 하며, 태그 외부에서는 {/*문자열*/}로 주석처리를 한다.

   class네임을 부여하고 싶을때는 class = ""가 아닌 className = ""을 사용해야 한다.

JSX태그 기본규칙

JSX태그 결과화면