[패스트캠퍼스] 프론트엔드 강의 학습일지(React 시작하기)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

---

리액트는 무엇일까?

• 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 사용한다.
• vue.js와 Angular는 프레임워크이고, 리액트는 라이브러리이다.
  • 프레임워크: 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것(프레임워크 안에 여러 모듈이 있다)
  • 라이브러리: 특정 기능을 모듈화 해놓은 것
• 리액트는 View를 담당하는데, 그외에 Model과 Controler를 조작하기 위해서는 여러 모듈을 사용하게 된다.
  • 라우팅(페이지이동): react-router-dom
  • 상태관리: redux, mobx, recoil
  • 테스트: Jest, Mocha

Node.js가 필요한 이유?

프로젝트를 개발할때 필요한 모듈인 바벨이나 웹팩 등이 Node.js로 사용하기 때문이다.

Node.js 설치는 아래 블로그에서 작성하였으니, 참고해 주세요.

https://rosylee.tistory.com/18

[패스트캠퍼스] 프론트엔드 강의 학습일지(Node.js와 Git)

브라우저가 그려지는 원리와 가상돔

리액트의 특징은 가상돔을 사용한다.

 

웹 페이지 빌드 과정(Critical Rendering Path CRP)

서버에서 HTML 문서를 브라우저에 전달하고, 브라우저가 문서에 따라 화면에 그리기 위해 HTML->DOM생성, CSS 랜더링 등을 해서 

DOM에 변화(인터렉션)가 발생하면, Render Tree를 재생성된다. 이러면 성능과 비용이 커지는 문제가 발생한다.

 

이를 해결하기 위해 나온 것이 가상돔(Virtual Dom)이다.

가상DOM은 실제DOM을 메모리에 복사해 둔 것이다.

이전 DOM과 비교해서 바뀌는 것만 가상DOM에 렌더링(Diffing)이 되고, 바뀐 부분만 실제 DOM에 적용(재조정)한다.

이렇게 되면, 많은 요소가 바뀌더라도 한꺼번에 묶어서 한 번에 실제 DOM으로 적용되므로 DOM 조작 비용이 줄어들 수 있다.

 

리액트 앱 설치

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

터미널에서 아래 명령어를 입력한다.

npx create-react-app {폴더 이름}

만약 폴더를 생성하고, 현재 폴더에 설치하려면 아래와 같은 명령어로 입력하면 된다.

 npx create-react-app ./

npx란?

노드 패키지 실행을 도와주는 도구이다.

• npm 레지스트리에는 많은 라이브러리들이 있다.
• 그중 create-react-app이라는 라이브러리를 사용해서 설치하는 것이다.

위와 같은 명령어로 설치하면, 아래 이미지처럼 되고 웹팩과 바벨등 여러 node module이 함께 설치된다.

웹팩(Webpack)이란?

• 오픈 소스 자바스크립트 모듈 번들러이다.
• 여러 개의 파일을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.
• 로딩에 대한 네트워크 비용을 줄일 수 있다.
• 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다.

바벨(Babel)이란?

• 최신 자바스크립트를 지원하지 않는 브라우저에도 적용이 되도록 변환시켜 주는 라이브러리이다.
• 최신 문법으로 개발을 할 수 있다.
  • ES6의 화살표 문법을 사용하더라도, 바벨을 사용하면 ES5문법으로 변환시켜 준다.

 

SPA(Single Page Application)이란?

웹 사이트의 전체 페이지를 하나의 페이지에 담아서 동적으로 화면을 바꿔가며 표현하는 것이다.

HTML5의 History API를 사용해서 페이지 전환이 가능하게 합니다.

 

Tic Tac Toe 앱 만들기

리액트 자습서에 있는 것을 따라 만들어 본다.

https://ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

JSX(Javascript syntax extension)

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

• 리액트에서는 HTML구조와 자바스크립트를 함께(JSX) 사용해서 UI를 나타낸다.
• JSX로 작성된 코드를 바벨을 통해 변환시켜준다.
• 주의사항: JSX에 여러 엘리먼트 요소가 있다면, 반드시 부모 요소 하나로 감싸줘야 한다.

리액트 코드 / 바벨이 변환해 준 코드

리액트로 개발 시 유용한 vscode 확장 프로그램

https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets 

ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace

설치하면 축약어로 빠르고 쉽게 코드 작성이 가능하다.

코드는 파일 이름 기반으로 생성된다.

• rcc(react class component) 클래스형 컴포넌트
• rfc(react funtional comonent) 함수형 컴포넌트

Props(Properties)

• 상속하는 부모 컴포넌트로부터 자식 컴포넌트에 데이터 등을 전달하는 방법이다.
• 읽기 전용(immutable)으로 자식 컴포넌트에서는 변경할 수 없다.
• 변경하려면 부모 컴포넌트에서 state를 변경시켜줘야 한다.

State

• 컴포넌트 안에서 무언가 기억하기 위해 사용한다.
• 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다.
• state 값이 변경되면 컴포넌트는 리랜더링 된다.
• 클래스형 컴포넌트에는 Constructor를 사용한다.
• Constructor(생성자)를 사용하면, 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해서 초기화할 수 있다.

import React from 'react';
import './Square.css';

export default class Square extends React.Component {
  // State 생성
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button
        className="square"
        onClick={() => {
          this.setState({ value: 'X' }); // State 변경
        }}
      >
        {/* State 이용 */}
        {this.state.value}
      </button>
    );
  }
}

state의 super 키워드는?

• 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용된다.
• 자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용된다.
• super 키워드 이후에 this 키워드가 나와야 한다.(부모 클래스의 생성자 호출을 먼저 해야 된다)
• super키워드에 props를 인자로 전달하는 이유는
  
  • React.Componet 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달
  • 생성자 내부에서도 this.props를 정상적으로 사용할 수 있도록 보장하기 위해서

강의 중 설명 스크린샷

 

State 보관하기

자식 컴포넌트에서 부모 컴포넌트로 옮기기

여러 개의 자식으로부터 데이터를 모으거나, 자식 컴포넌트끼리 서로 통신하려면 부모 컴포넌트에서 공유 state를 정의해야 한다.

 

불변성을 지키는 방법은?

참조 타입(Array, Object)은 아예 새로운 배열을 반환하는 메소드를 사용한다.

• 새로운 배열 반환하는 메소드: spread orerator, map, filter, slice, reduce
• 원본데이터 변경하는 메소드: push, splice