React 기본 개념 정리 (2)

 

 

위 코드는 Greeting() 이라는 함수를 사용하면서 만든 간단한 React 컴포넌트를 만든 예시이다.

코드를 좀 더 뜯어보자면

import React from 'react'; 이 부분이 생소하게 느껴진다.

이 문장은 React 라이브러리를 현재 파일로 가져오는 기능을 가진다.

 

이 부분을 이해하기 위해서는 React의 특징을 좀 더 알아야 한다.

React에서는 JSX를 사용하여 HTML과 비슷한 형태의 코드를 javascript 안에 작성한다.

그렇기 때문에 JSX는 javascript로 변환되어야 한다. 

 

+) 여기서 JSX란?

JSX는 javascript XML의 약자로 HTML처럼 보이는 코드를 javascript 안에서 쓸 수 있도록 하는 문법이다. 

React를 쓸 때 JSX를 사용하면 HTML과 javascript를 같은 파일 안에서 조합할 수 있다.  위의 예시를 보면 알 수 있듯이, 

html과 javascript가 혼재되어있는 것 같은 모습이다. 

 

다시 본론으로 돌아가서 JSX가 javascript로 바뀌어야 하고 이 과정에서 React 라이브러리가 필요하기에 import React...

이 구문이 필요한 것이다. 마치 JSX와 javascript 사이에서 React가 통역을 한다는 느낌이다.

 

이제 본격적으로 React 프로젝트를 만들기 위한 준비를 해보자.

 

1. Node.js와 npm 설치

2. Create React App 설치 

    (터미널에서 npm install -g create-react-app 입력)

3. 새로운 react 앱 생성

    npx create-react-app my-first-react-app

4. 프로젝트 폴더로 이동

    cd my-first-react-app

5. 앱 실행

     npm start

 

기본 컴포넌트 수정

src/App.js 파일을 열고 컴포넌트를 수정해보자.

+) 그런데 왜 App.js에서 수정을 시작할까? 

그 이유는 React 프로젝트가 기본적으로 App 컴포넌트를 가장 기본적인 컴포넌트로 설정해놓기 때문이다.

App.js는 React 앱의 최상위 컴포넌트로 하위 컴포넌트를 가져와서 화면에 렌더링해준다.

마치 다른 프로그래밍 언어에서 main과 비슷한 역할을 한다고 보면 될 것 같다.