[React] 코드 이해하기
React - 5
[본 글은 '리액트를 다루는 기술' 의 책을 참고로 정리한 공부 내용입니다.]
src/App.js
import React from 'react';
이 코드는 react 모듈을 사용이 가능하도록 처리를 한다. 처음 리액트 프로젝트 생성 시 node_modules라는 디렉토리가 같이 생성되는데 이 생성 과정 속 디렉토리 내부에 react 모듈이 설치가 된다. 이렇게 설치된 각종 모듈을 import 구문을 이용해 사용할 수 있게 해준다.
번들러(bundler)
이런 식으로 모듈을 불러와 사용하는 것은 node.js에서 지원하는 기능이다. 즉 브라우저에서는 지원하지 않는다. 정확히 말하자면 최신 자바스크립트에서도 import 구문을 지원하지만 해당 기능과는 개념이 조금 다르다.
이런 기능을 브라우저에서도 사용할 수 있게 사람들은 번들러를 사용한다. 번들은 묶는다는 뜻으로 즉 파일을 묶듯이 연결하는 것을 뜻한다.
다른 모듈끼리의 번들도 존재해 이 모두를 묶어 연결해 하나의 파일로 만든다.최신 자바스크립트에서 지원하는 import 구문은 모듈을 묶는 것이 아닌 그저 다른 경로의 자바스크립트 파일을 참조하는 용도로만 사용하기 때문에 번들링과 다른 개념이다
번들러는 여러 도구들이 있으나 리액트에서는 주로 편의성과 확장성이 다른 도구보다 뛰어난 번들러 도구인 웹팩을 사용하고 있다.
번들러 도구를 사용하면 모듈끼리 모두 합쳐 하나의 파일로 만들지만 최적화 과정에서 여러 개의 파일로 분리될 수도 있다
웹팩을 사용할 경우 SVG파일과 CSS파일을 불러오는 것이 가능하다. 파일을 불러오는 역할은 웹팩의 로더(loader)라는 기능이 담당한다.
loader 종류
css-loader : css 파일을 불러옴
file-loader : 웹 폰트나 미디어 파일을 불러옴
babel-loader : 자바스크립트 파일을 불러와 바벨이라는 도구를 사용해 구 버전 브라우저와의 호환을 위해 es5문법(이전버전 자바스크립트 문법)으로 변환한다.
loader는 원래 직접 설치와 설정을 해주어야 하지만 create-react-app로 프로젝트를 생성 시 모두 해주기 때문에 별도의 설정이 필요 없다.
컴포넌트와 JSX
App.js 파일을 잘 살펴보면 함수 형식으로 컴포넌트를 생성하고 있다. 이런 컴포넌트를 함수형 컴포넌트라고 한다. 컴포넌트를 렌더링 할 때에는 반환(return)하고 있는 내용을 보여주게 된다. 그렇지만 문법을 자세히 살펴보면 일반적인 스크립트의 문법이 아니라 HTML 같이 생겼다. 하지만 HTML이 아니고, 문자열 템플릿도 아니다. 바로 이런 코드의 형식을 JSX라고 부른다.
JSX에 대해서는 차후에 자세히 살펴보겠지만, 대략적인 이해를 하고 싶다면 아래의 포스팅을 보며 리액트와 JSX에 대한 개념을 정립해 나가는 것을 추천한다.
