React code 작성 기본

Webpack은 code들을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어 낸다. 프로젝트를 만들 때 파일 하나하나 만든 것들을 일일히 html상에서 불러오는 것이 아니라, 예를 들어 js파일에서 png를 사용하겠다 그러면 import라는 구문으로 불러올 수가 있는데,

 

그렇게 하면 bundling작업을 하게될 때 특정 확장자마다 어떤 처리작업을 하도록 준비를 해주는 것이다.

 

예를 들어 아래그림 과정에서 이미지들을 압축하고 결과물로는 특정 경로에 특정이름으로 따로 저장해놓게끔 해줄 수가 있다. 아까 js파일에서 import한다고 했는데 js에서 png를 불러올려고 하면 나중에 빌드 되었을 때 사용될 경로가 문자열로 들어오게 된다.

 

예를 들어서 js의 png를 불러왔다 그러면 불러온 것을 조회할려고 하면 실제로 저장된 경로가 문자열로써 받아와 진다. 그걸 특정부분에서 보여준다. 이렇게 사용할 수가 있다.

 

또는 js파일을 여러개 만들었을 때 하나하나 합쳐서 하나의 파일로 만들어준다. 기본적으로는 하나로 만들어 주는데 나중에 원하면 규칙에 따라서 분리시킬 수도 있다. 나중에 es6 modern javascript를 사용할 건데 원래 일부 새로운 js문법들은 구형 브라우저에서 지원이 되지 않는다. 그래서 새로운 문법을 사용할 수 있게끔 나중에 babel이라는 것을 사용할 것이다.

 

그래서 js로도 변환과정을 거쳐서 빌드를 해주면 여러종류의 브라우저에서 실행이 될 수가 있다.

 

그리고 스타일의 경우에는 sass나 less을 사용한다 그러면 그것도 웹팩에 연동을 시켜서 컴파일 시킨다음에 하나의 css파일 혹은 여러개가 될 수도 있고 css파일로 해서 따로 저장을 해준다.

 

결과적으로는 html파일에서 아래 static assets를 불러와서 사용할 수 있게끔 자동으로 처리를 해줄수가 있다.

웹프로젝트를 만들 때 전체적으로 파일들을 관리해주는 도구가 Webpack라고 보면 된다.

Webpack structure

Babel에 대해서 알아보면 Babel은 JS변환도구이다. JS는 계속해서 새로운 문법이 도입되고 있고 계속해서 좋아지고 있다. Node js나 브라우저의 js engine에서 모든 문법을 지원하지는 않는다. babel홈페이지를 들어가보자.

참고: https://babeljs.io/

Babel · The compiler for next generation JavaScript

홈페이지에서 직접 입력해서 변환되는 과정을 살펴보자.

const object = {
  a: 1,
  b: 2
};

const { a, b } = object;

위 코드가 아래와 같이 변했다.

밑에 import는 react라는 모듈이 설치되어져 있는데 그걸 불러와서 사용하겠다라고 하는것이다.

react를 사용할 때는 꼭 React를 불러와 줘야한다. 

 

아래의 있는 app파일을 보면 class라는 문법이 사용이 되었다. 컴포넌트를 만드는 방법 중 2가지가 있는데 그 중 하나가 class를 통해서 만드는 것이다. 다른 방법은 함수를 통해서 컴포넌트를 만드는 방법이 있다.

그 밑에는 render라는 함수, 메소드가 있는데 render메소드에는 꼭 js

형태의 코드를 리턴해줘야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://codesandbox.io/s/