TIL) 컴포넌트 기반 개발, 리액트 기초, Create React App이란? 리액트 실행하기

 

컴포넌트란?

하나의 기능 구현을 위한 여러 종류의 코드 묶음이다.

// UI를 구성하는 필수 요소이다. 

// 컴포넌트는 리액트의 심장이다.

 

const Component = () => {
	return (
    	<>
        	<div>{정의1}</div>
            <div>{정의2}</div>
        </>
    )
};

 

컴포넌트를 여러개 만들고 조합해서 어플리케이션을 만들 수 있다. 

 

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다.

이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다.

이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

 

➥ 위 그림에서 최상위 컴포넌트인 A가 root (근원)이 되고, 다른 자식 컴포넌트를 가질 수 있다. 

 

 

➥ 이러한 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있다.

 

독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로는 복잡한 애플리케이션도 만들 수 있다.

 

---

 

Create React App = 터미널 입력 한번으로 바로 리액트 개발 시작할 수 있다!

 

Create React App이란?

=> 리액트 SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인으로 복잡한 개발 세팅을 쉽게 해주는 것이다. 

 

1. 터미널 실행 후, node js 버전과 npm 버전 확인한다.

git --version

➥ git version 확인을 통해 git이 설치되어있는지에 대한 여부도 알 수 있다.

node --version

➥ node js 버전을 확인하면서 node js가 설치되어있는지 확인할 수 있다. 

npm --version

 

---

Create React App는 npx라는 명령어를 사용한다. 

 

추가학습

2022.06.06 - [JavaScript] - nvm,npm, npx, yarn를 알아보자!

 

npx create-react-app react-random-proverb

 

 

이 문구가 나오면, 성공적으로 react-random-proverb라는 새로운 리액트 프로젝트를 만든거다!

 

 

 

 

package.json 파일에서 코드를 보고, 터미널에 아래 명령어를 입력한다. 

npm run start

그럼,

👇 아래 페이지가 나타난다. 

 

주의사항!

자바스크립트로 만든 프로젝트를 웹 브라우저에서 열때처럼 vs code에서 크롬으로 열기를 하면 웹 페이지 상에는 빈 화면이 나온다. 

 

그 이유는??

JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니라서 브라우저가 이해할 수 있도록 Babel을 통해 JS 코드로 변환시켜줘야한다. 

즉,  Babel 작업을 해야 웹브라우저 상에 출력이 된다. 

 

해결방안!

터미널에 npm run start 입력하기!