망할고양이의 도피처

생성되어있는 App.js에 컴포넌트를 추가하여 화면을 그리는 간단한 작업을 수행하겠습니다. 

src 폴더 하위에 component 폴더를 생성합니다. 

새로 생성한 component하위에 3개의 compoent 를 생성할 계획입니다. 

• Greeting.js
• Money.js
• Welcome.js

Greeting.js 

export default function Greeting(){
    return <h2>Greeting!!!</h2>
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

참고. Component를 작성할때 작성 방법

//방법 1
export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

//방법 2
const Welcome = function(){
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

//방법 3
const Welcome = () => {
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

이렇게 작성된 두개의 Component를 App.js에서 사용해 보겠습니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';
import Welcome from './component/Welcome';
function App() {
  return (
    <div className="App">
      <Greeting />
      <Welcome/>
    </div>
  );
}

export default App;

이번에는 Welcome안에 Money를 넣어서 화면을 구성하도록 하겠습니다. 

Moneny.js 를 작성합니다. 

export default function Money(){
    return <h3>Money</h3>
}

Welcome.js를 아래와 같이 수정합니다.

import Money from './Money'

export default function Welcome(){
    return (
        <h2>Welcome !!</h2>   
        <Money/>
    )
}

그리고 저장을 하면 아래와 같이 오류가 발생합니다. 

JSX는 return할때 한개의 Object만 return할 수 있습니다. 

즉, Welcome의 <h2>와 <Money/> 안에 있는 <h3>가 리턴되어 2개의 Object가 리턴됨으로서 오류가 발생했습니다. 

Welcome.js의 코드를 아래와 같이 수정합니다. 

import Money from './Money'

export default function Welcome(){
    return (
        <abcd>
        <h2>Welcome !!</h2>   
        <Money/>
        </abcd>
    )
}

<abcd>를 추가하여 한개의 Object로 변경하여 retrurn되도록 수정하면 정상적으로 화면이 실행됩니다. 

Component는 리액트에서 개발할 모든 애플리케이션의  최소단위의 조각입니다. 

Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다. 

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
• 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
• 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

https://ko.reactjs.org/docs/components-and-props.html

<함수형 컴포넌트 예시>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<클래스형 컴포넌트 예시>

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

create-react-app를 이용하여 개발환경을 구축한 후 폴더의 내용을 보면 아래 그림과 같이 여러 폴더 및 파일이 존재한다.

각  파일 및 폴더별 역활을 알아보도록 하자.

App.js

App.js를 수정할 경우 화면의 reload(새로고침) 없이 적용되는 것을 확인할 수 있습니다.

이 기능을 HMR(Hot Module Replacement) 이라고 합니다. HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다

Hot Module Replacement(HMR)는 모듈전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거합니다. 다음과 같은 몇 가지 방법으로 개발 속도를 크게 높일 수 있습니다. 전체 다시 로드 중에 손실되는 애플리케이션의 상태를 유지합니다.

package.json

모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있습니다

package.json 은 주고 받는 패키지에 대한 상세 설명서라고 할 수 있습니다. 즉, 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json입니다. 이러한 정보들은 모두 npm 뿐만 아니라 패키지의 최종 사용자에게 무척 중요한 것들입니다.

이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있으며, npm 은 이를 통해 프로젝트를 식별하고, 프로젝트의 디펜던시(dependency)를 처리합니다

그림과 같이 dependencies영역에는 설치한 모듈에 대한 환경구성을 위한 정보가 작성되어 있으며 서버를 실행할 때 사용한 npm start와 같은 명령어가 scripts에 작성되어 있습니다. 

Create-react-app 설치 이후 서버를 실행하기 위해 아래 그림과 같이 터미널을 열어준다.

그리고 명령어를 입력

서버가 실행되어야하지만 오류가 나는 경우가 있다.

# 오류.1 - 터미널이 Winodws Powershell로 되어있는경우 

해결방안 

기본터미널 프로그램을 변경한다. 

CTRL + SHIFT + P 를 눌러 아래 그림과 같은 창을 호출한다.

Selectr Default Profile이라는 키워드로 검색 후 아래 항목을 선택

Terminal : Select Default Profile 선택 후 Command Prompt를 선택하여 기본 터미널 프로그램을 선택합니다. 

# 오류.2 기본터미널 프로그램을 cmd로 변경하였으나 npm이 실행이 되지 않는 경우

해결방안

설치한 nodejs의 경로를 환경변수에 추가한다.

# 오류.2에 해당하는겨우 VSCode를 종료한 뒤 재실행한다.

위의 그림과 같이 터미널에 정상적으로 서버가 실햄됨과 동시에 브라어저에 위 그림과 같은 페이지가 열리게 된다. 

먼저 ReactJS가 설치될 폴더를 하나 생성합니다. 

이 생성된 폴더에 ReactJS를 설치할 계획입니다.

터미널을 하나 실행합니다. 

윈도우즈 검색에서 cmd 라고 검색해도 아래 그림과 같이 찾을 수 있습니다. 

명령 프롬프트에 아래 그림과 같이 입력하여 create-react-app를 설치합니다. (npm이 아니고 npx 입니다.)

최초 설치시에는 시간이 좀 걸릴 수 있습니다. 

<주의사항 react_01 이라는 프로젝트 명은 대문사를 사용하면 오류가 발생합니다. ex) myReactJS >

실행 결과 

.

.

.

설치가 완료되었다면 이전에 설치한 VSCode를 실행하고 해당 폴더를 열어줍니다. 

예시) c:\dev\react_01

해당 폴더를 선택해준 경우 정상적으로 파일이 자동으로 생성되어 있는 것을 확인할 수 있습니다.

Webpack, Babel등을 추가로 설치하여 개발환경을 구성하는데에 초보자에게는 상당한 어려움이 있으나 Create-react-app를 이용하면 환경설정을 쉽게 할 수 있습니다. 

React를 시작하기 위한 준비물로 가장먼저 NodeJS 설치를 먼저해야합니다.  

NodeJS 를 설치하는 이유는 npx를 이용하여 create-react-app를 설치하기 위해서입니다. 

https://nodejs.org/ko/

그리고 코드를 작성하기 위해서 에디터를 설치해야하는데 가장 많이 사용하고 있는 Visual Studio Code(VS Code)를 설치하도록 하겠습니다. 

https://code.visualstudio.com/