[React.js] React 기초1 (+ App.js)

node.js 와 create-react-app 을 설치했다면

리액트 프로젝트를 저장할 폴더를 미리 생성해놓고, 경로 이동을 한 뒤에 터미널 창을 켜서 아래 명령을 실행한다.

* npx 는 npm에 올라가 있는 패키지를 바로 실행해서 설치시켜주는 도구이다.

 

설치가 되는 화면을 보여주다가 잠시 아래 화면처럼 뜨는 것을 볼 수 있다.

 

voca 라는 폴더 안에 실제 프로젝트가 생성된 것을 볼 수 있다.

 

생성된 프로젝트 폴더를 vs code에서 연다. 자동으로 폴더와 파일들이 세팅되어 있는 것을 확인할 수 있다.

create-react-app 에서 쉽고 빠르게 프로젝트를 시작할 수 있도록 미리 만들어준 것이다.

 

vs code 하단에 있는 터미널 창에서 npm start 를 입력하면

실행이 되면서, 자동으로 브라우저 창이 열리며 아래 화면이 뜬다.

App.js 에서 뭔가를 수정하면 웹 브라우저 창이 자동으로 업데이트 반영되는 것을 확인할 수 있다. 이게 create-react-app 이 해주는 것이다.

node_modules 폴더

프로젝트를 실행할 때 사용하는 dependency 모듈들이 모두 모여 있다. 용량도 크고 파일도 많기 때문에, 깃에 올릴 때는 이 폴더는 올리지 않는다. 

 

package.json 파일

node_modules 에 설치 되어 있는 모듈이 모두 기록되어 있다.

프로젝트 폴더는 package.json 파일만 남아 있다면 얼마든지 다시 생성할 수 있다. 따라서 깃에서 이 파일만 있다면, 다른 개발자가 보더라도 동일한 환경을 구축할 수 있다.

 

 

public 폴더의 index.html 

<div id="root"></div> , 이 div 밑으로 리액트 코드가 실행되서 만들어진 DOM이 구현되게 된다.

 

* DOM : Document Object Model 로, 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. DOM은 원본 HTML 문서의 객체 기반 표현 방식이며, 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있도록 한다.

 

* 인터페이스(interface) : 서로 다른 두 개의 시스템 또는 장치 사이에서 정보나 신호를 주고 받는 접점 또는 경계면을 의미한다. 즉, 정보를 공유하고 교환해서 기기를 쉽게 동작하는데 도움을 준다.

Hot Module Replacament(HMR)

root div에 문자열을 적으면 브라우저에 바로 반영되는 특징을 의미

 

패키지.js 에 서버 실행 명령문 적혀져 있다.

 

빌드는 배포할 때 사용하는 것

 

class 가 자바스크립트 예약어라서 클래스명은 className으로 사용해서 적는다.

 

리액트는 각 페이지를 html로 코딩하는 것이 아니라, 각 부분을 컴포넌트로 만들어서 조립해서 사용하는 형태이다.

기능에 따라 컴포넌트 별로 만들어서 쓰면, 재사용하거나 유지관리하기가 편해진다.

 

App.js 안의 앱 컴포넌트는 함수로 만들어져 있다.

이걸 인덱스.js 에서 임포트해서 사용한다.

함수로 만들어진 컴포넌트를 함수용 컴포넌트라고 부른다. 모든 컴포넌트는 대문자로 시작해야 한다.

 

JSX(JavaScript XML) 는 자바스크립트 안에 html 처럼 적는 언어이다. 

 

App.js 연습

import './App.css';

function App() {
  const name='Justin';
  const naver={
    name : "네이버",
    url : "https://www.naver.com/"
  }
  return (
    <div className="App">
      <h1 style={{
        color : 'green',
        backgroundColor : '#2EFEC8',

      }}>
        Hello, {name}!<p>{2+3}</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
        
    </div>
  );
}

export default App;

 

외부 참조 링크

https://www.youtube.com/watch?v=dvQMbg7n6mY 

https://wit.nts-corp.com/2019/02/14/5522

DOM은 정확히 무엇일까? | WIT블로그