react 뼈대

🐤 zerocho 리액트(웹 게임) 강좌를 듣고 정리했습니다. 코드 출처도 zerocho 입니다.

 

 

리액트 특징

 

[1]

리액트를 쓰면 개발 방식의 큰 변화중 하나가

직접 DOM을 조작해서 화면을 바꿔주는 방식이 아니라,

우리는 state, props등의 데이터만 바꿔주고, 리액트가 state의 변경 사항을 감지하고 다시 렌더링해서 알아서 데이터 - 화면의 싱크를 맞춰준다는 것이다.

 

+

[2] 일종의 사용자 정의 엘리먼트인 컴포넌트 단위로 화면을 구성해나가기 때문에 재사용성이 좋아지고,

 

[3] 결과물이 single page application라는 점 때문에 (서버에게 요청하는 페이지는 첫 엔트리 지점 하나고 나머지는 js 코드로 생성한 컴포넌트들이 조건에 따라 보여지고 숨겨지고 하는 방식으로 페이지 이동을 하는 "것 처럼" 보인다)

리로드의 (리렌더링은 state 바뀔때마다 한다!) 깜빡임이 없기때문에 사용자 경험이 좋아진다는 점.

의 장점이 있다.

 

 

 

 

 

1. 제일 민낯의 리액트 : JSX 미적용

리액트 빌드 결과물

결국 리액트를 사용해서 만들려고 하는 것은 클라이언트(브라우저)에 그릴 내용이다 (아주 단적으로 말하자면 html)

리액트에서 제공하는 함수, 객체를 사용해 컴포넌트를 정의하고 기존 html태그의 자식으로 그려주는 자바스크립트코드를 <script>태그로 달고있는 html

 

 

리액트 코드를 <script>태그로 cdn에서 가져오고

(이때 크로스오리진 요청이 가능하게 하려고 crossorigin 속성이 들어갔다고 함.)

콘솔에서 저 cdn 요청/응답에 대한 헤더 확인해보면 이렇게 되어있다.

 

JSX를 적용하지 않아서 React.createElement라는 html 엘리먼트로 만들어주는 (?) 함수를 사용한다.

 

script 태그안의 자바스크립트 코드는 (1) 컴포넌트를 정의하는 부분 (2) 컴포넌트를 그리는 부분 ( ReactDOM.render ) 두가지로 기능적으로 분리해서 생각할 수 있다.

 

 

 

 

 

 

2. JSX 라는 syntactic sugar 적용하기 -> 이를 위해 babel이 필요

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 

(JSX 문법을 바벨로 컴파일해서 브라우저가 알아들을 수 있는 자바스크립트 코드로 바꾸기 위해 사용)

 

 

 

 

 

 

 

3. 파일 분리하기 -> 하나의 자바스크립트 파일로 합쳐주기 위해 webpack 필요

이젠 빌드 (웹팩 실행)를 위해 노드 환경이 필요하다.

 

 

노드 환경에서의 웹팩 빌드과정이 있을 거기 때문에

이제는 html 코드에서 직접 리액트 코드를 <script>태그로 가져오지 않고

각 .js, .jsx 파일에서 npm 명령어로 모듈 설치하고

노드에서 쓰이는 모듈포맷인 CJS문법 (require, module.exports)으로 리액트 및 필요한 모듈 가져다 쓰면된다.

 

 

 

for this you can create a webpack.config.js file in the root folder and webpack will automatically use it.

webpack config 예시

webpack.config.js

 

 

webpack 명령어 실행은

1. 환경변수 설정 같은거 해서 명령어 등록하거나 2. npx webpack 3. package.json에 scripts의 명령어로 등록

방식으로 하면 된다고 한다.

 

 

 

 

 

 

4. 알아서 이런거 해줘라 create-react-app

create-react-app으로 생성되는 프로젝트 파일 구조

create-react-app 명령어로 프로젝트 생성하면 위의 웹팩, 바벨 이런거 알아서 구성해서 위와 같은 구조 만들어준다.

아까 자바스크립트 부분을  (1) 컴포넌트를 정의하는 부분 (2) 컴포넌트를 그리는 부분 ( ReactDOM.render ) 

크게 이 두가지 기능으로 분리해 생각할 수 있다고 했는데 

index.js 파일이 (1), App.js 파일이 (2) 중 가장 최상위 컴포넌트 역할을 담당한다고 생각하면 될 것같다.

이걸 베이스로 이제 app 컴포넌트 하위에 새로운 컴포넌트들을 새 파일에다가 만들어나가면 된다.

 

 

 

코드 다 작성하고나서

build명령어 ( npm run build ) 실행하면 웹팩 명령어 실행 같은 것 해서 /build 디렉토리 아래 빌드 결과물 만들어주고

start 명령어 ( npm start ) 실행하면 개발용 서버 돌려서 localhost:3000에 접속해서 확인해 볼 수 있다.

 (+test, eject는 아직 잘 모르겠다)

2021.02.27 - [WEB] - create-react-app으로 만든 app에서 테스트용 서버는 어떻게 돌아가나

create-react-app으로 만든 app에서 테스트용 서버는 어떻게 돌아가나

create-react-app의 테스트용 서버에 대해서는 이전에 쓴 글이 있다.

 

+ 참고로 웹팩 설정에 관한 파일은 react-scripts > config 여기에 들었더라.