TIL(2020.12.07)

김지민·2020년 12월 10일
0

TIL

목록 보기
3/28

실수로 통으로 날려서 대강 날림으로 재작성...

1.virtual DOM

  • 변화가 일어나면 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, js로 이루어진 가상의 DOM에 한번 렌더링(서버로부터 html파일을 받아 브라우저에 뿌려줌)을 하고 기존의 DOM과 비교 후 정말 변화가 필요한 곳에 업데이트.

** virtual DOM은 React에서만 쓰는걸까?

  • react는 virtual DOM을 성공적으로 사용한 첫번째 라이브러리
  • 리액트 외에도 vue, marko, mithrill 존재

2. react를 특별하게 만드는 점은?

2-1. 어마어마한 생태계

  • 리액트는 jquery가 처음 나왔을 때처럼 인기가 좋음.
  • 그로 인해 수많은 라이브러리가 만들어지고 있고, 기존 js, jquery로 만들어진 소스들 또한 react로 포팅됨.
  • 모달같은 간ㄷ나한 소스 뿐 아니라 라우터, 상태관리 라이브러리같은 좋은 소스들도 많이 출현

2-2. 사용하는 곳이 많다.

  • 점유율이 높다.
  • 한번 쓰면 계속 쓰고싶어진다(통계상)

3. 리액트 사용해보기

3-1. webpack(번들링도구)

  • webpack은 코드들을 의존하는 순서대로 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어냄.
  • 프로젝트를 만들때 만든 파일들을 일일이 html상에서 불러오는게 아니라 특정 확장자마다 특정한 처리 작업을 하도록 준비해줌.
  • gulp와 비슷한데 더 좋음
  • 기능의 예로 js파일을 여러 개를 만들었을 때, 그 파일들을 합쳐서 하나의 파일로 만들어줌. 기본적으로 하나로 만들어주는데 나중엔 규칙에 따라 분리시켜줄 수 있다.
  • 스타일의 경우 sass나 less를 사용했을 때 컴파일을 통해 하나(또는 여러개)의 css로 변환해 따로 저장을 해줌.
  • 나중에 html파일에서 자동으로 css를 불러와 처리할 수 있도록 해줄 수 있다.
  • 한마디로 웹 프로젝트를 만들때 전체적으로 파일들을 관리해주는 도구.

3-2. babel(컴파일러)

  • javascript 변환도구(컴파일러)
  • js는 계속해서 문법이 개선되고 있으나 node.js, 브라우저에서는 그 모든 문법을 지원하지는 않음.
  • 리액트 작성 문법인 jsx를 이용할 때 babel이 이용됨.
  • 초기 단계에선 직접 건드릴 일 없음.

3-3. 리액트 시작하기

import React, { Component } from 'react';
// 리액트(모듈이 설치된 상태에서) 모듈을 불러와 사용하겠다는 선언
// 리액트를 사용할 땐 위와 같이 꼭 리액트를 불러와야함

class App extends Component {
  render() {
    return (
    );
  }
}
//component를 만들기 위해 클래스 문법이 사용된 형태.
// component를 만드는 방법은 크게 2가지
// 1) class 통해서 만들기
// 2) 함수를 통해서 만들기
// 위와 같읕 함수 형태(render)를 메소드(method)라고 부름.
// 반드시 JSX형태의 코드 리턴 필요
profile
wishing is not enough, we must do.

0개의 댓글