[React] React 프로젝트 생성, 컴포넌트화

React 프로젝트 생성

설치돼있어야 할 프로그램, 지식

• Node.js, npm
• Visual Studio Code
• HTML, CSS, JS 기초 지식

React 프로젝트 생성 방법

Windows -> cmd

npm -v

: npm 버전 확인 -> 무슨 버전인지 출력된다면 npm이 다운된거임 ( 예 : 6.14.13 )

cd '프로젝트 폴더 경로'

: 프로젝트 폴더로 이동

npm install -g create-react-app
create-react-app "프로젝트명"

이런 식으로 출력되고, 폴더가 생성됐다면 성공

 

npm 실행은 어케 함?

vs code 터미널창에서

npm run start

를 해보면 localhost로 웹 서버를 열 수 있다.

 

웹을 build 하려면 (프로덕션 모드의 애플리케이션을 만들 때)

npm serve
npx serve -s build

이렇게 입력 후

터미널 창에 Serving!이 출력된다면 성공한거고, 저 주소로 웹을 볼 수 있다.

 

대충 파일 훑어보기

index.html

웹을 Run했을 때 가장 먼저 보이는 html 화면이다.

여기서 body 태그 안에 div id="root"가 중요.

 

index.js

index.html이랑 연결돼있는 자바스크립트 파일이다.

ReactDOM.render() : React 코드를 DOM(Document Object Model)에 붙이는 역할

render함수안에

document.getElementById('root')

이런 코드를 볼 수 있다.

이건 html에서 js가 root라는 아이디를 가진 것을 선택하는 문법이다.

그래서 최종적으로 render 함수는 id가 root인 것에 컴포넌트를 조합하는 것이다.

 

import App from './App';를 통해 <App /> 컴포넌트를 실제로 구현한다.

 

App.js

App 클래스는 Component를 상속받고 render() 함수를 사용하고 있다.

 

Component 규칙

• 모든 컴포넌트는 Component를 상속받아야 함
• 모든 컴포넌트는 render 함수가 있어야 함
• Component를 만들 때는 반드시 하나의 최상위 태그로 시작해야 함 (div, header, nav 등등)
• import React, { Component } from 'react' -> 이게 꼭 있어야 함

 

Component화란?

Component

: 사용자가 사용하는 시스템에 대한 조작장치

https://opentutorials.org/course/473/2512 <- 참고

 

Component화

Component화한다는 것은 

이런 html 코드를

이런식으로 Component로 만든다는 것이다.

 

Component화 방법

App.js

import Subject from './components/Subject';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Subject></Subject>
      </div>
    );
  }
}

Component를 상속받는 App 클래스를 만들고,

render 함수 안에 return 값으로 div 태그를 넣어줌

div 안엔 Subject 컴포넌트를 넣어준다.

 

그리고 components 폴더를 만들어 그 폴더 안에 Subject.js 파일을 만들어준다

(굳이 만들 필요X, App.js 안에 코드 적어도 됨)

 

Subject.js

import Subject from './components/Subject';

export default function Subject() {
    return (
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>
    );
}

Subject 함수를 만들어 <header>를 return 해줌!

 

그러면 Web 사이트에서

이런 식으로 나오는 걸 볼 수 있다.

 

끗

 

잘못된 정보나 수정해야할 점 있다면 편하게 댓글 적어주세욥!