React 특강 정리 1일차.

이번에 학교에서 하는 React 강의를 들을 수 있는 기회를 가지게 되었다. React의 전반적인 내용과 중요한 부분을 위주로 가르쳐주는 강의였고 이번 글은 해당 강의에 대해서 가르쳐주신 부분을 정리하는 포스팅이다.

 

 

WEB = HTML + CSS + JavaScript

1. HTML - 마크업 언어

2. CSS - 스타일 규칙 언어

3. JavaScript - 프로그래밍 언어 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 웹 페이지를 꾸며주도록 하는 언어

 

• 보통 HTML과 CSS는 프로그래밍 언어가 아니라고 한다.
• HTML은 뼈때, CSS는 스타일 꾸미기, JavaScript는 HTML, CSS를 움직이게 만들 수 있는 동적으로 컨텐츠를 만들게 한다.

 

DOM - Document Object Model

출처: 코딩의 시작 TCP School

 

React를 공부해야 하는데 알아야하는 중요한 개념이다.

DOM이란 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

 

이러한 객체 모델에서는 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 알려준다.

여기에서 말하는 문서의 요소는 노드, 노드 속성, 동작이 가능한 메소드와 같은 오브젝트들을 의미한다.

 

위의 문장의 예시로는, JavaScript가 직접 HTML 파일로 들어가는 것이 아니라 DOM이라는 것을 통해서 HTML을 제어하는 것이다.

 

 

 

웹 브라우저와 동작원리

웹 브라우져 마다 사용하는 JavaScript 엔진이 다르다. 하지만 보통은 아래와 같은 동작 원리를 가지고 있다.

웹 브라우져의 동작 원리

1. HTML은 DOM을 통해 구조화 모델이 된다.
2. CSS는 Style Rules을 통해 DOM과 연결하게 된다.
3. 위에 방법으로 HTML과 CSS가 합쳐져서 Render Tree를 통해 화면 상에 랜더링이 된다. 이 부분에서 레이아웃이 결정된다.
4. 마지막으로 페인팅을 통해서 색이 입혀지고 최종적으로 보여지게 된다.

 

JavaScript 종류

예전에는 웹 브라우저를 통해서 동작이 되었다면 다양한 자바 스크립트로 인해서 다양한 환경이 나오게 되었다.

 

Node.js, NPM

• 자바스크립터 런타임 환경이다.
• 기존 브라우져내에 자바스크립트 엔진에서만 돌아가던 것을 독립을 시켜서 다른 환경에서도 돌아가게 하는 런타임 환경이다.
• Node.js가 있기 때문에 JavsScript로 서버, 모바일 앱, 특정 동작을 수행하기도 한다.
• 간혹 가다가 Node.js를 서버라고 말하는 경우가 있는데, 서버가 아닌 런타임 환경이다. 
• NPM은 Node.js를 돌아게 해주는 라이브러리 저장소라고 보면 된다. 웬만한 라이브러리, 패키지는 다 들어가있다고 보면 된다. 

* Express는 공부해서 추가 정리하기.

 

React

• UI를 만들기 위해서 만든 자바스크립트 라이브러리, UI만 관여한다.
• 리엑트는 서버를 컨트롤하지 않는다. 화면에 보여지는 부분을 집중해서 프로그래머가 편리하고 논리적으로 웹페이지를 만들수 있게 도와주는 라이브러리이다.
• 모바일 같은 경우는 빌드를 자주해줘야 해서 시간이 많이 걸립니다. 하지만 웹과 같은 경우는 바로 적용이 되는 점이 장점이다.

 

React Native

React와 개념은 같지만 모바일 앱을 Native로 만들수 있게 해주는 프레임 워크이다. 빌드 환경부터 이런 것들이 다 포함되어 있어어 프레임워크라고 하고 React는 UI만 관여한다.

 

* React & React Native?

• 페이스북에서 자체적으로 사용하기 위해 개발되었다.
• 빠른 라이브러리가 아니다. 동작을 빠르게 하기 위해서 만든것이 아니다.
• 웹페이지를 유연하게 만들 수 있게 도와주는 것이다.

---

ES5, ES6 (ECMAScript Standard)

• 웹 브라우져에서 자바 스크립트 작동을 위한 표준 규격
• ES6로 개발하고 Babel 등의 컴파일러 도움을 받아 ES5로 브라우져가 일기 쉽게 바꿔준다.

 

BaBel

자바스크립트 컴파일러

최신 문법은 옛날 브라우져에 안읽혀질 수 있다. 그렇기 때문에 예전 문법으로 변환해주는 그런 컴파일러이다.

 

---

React를 시작하기 위해서 어떤 방법이 있을까?

1. Create React App 사용하기

 

React 개발 환경을 한번에 구성해주는 보일러 플레이트이다.

 

* 보일러 플레이트? 붕어빵 기계, 일종의 템플릿

 

원래는 React환경을 위해서 엄청난 많은 설정이 필요하다. 위에서 말한 BaBel, Plugin 등 다양한 라이브러리를 설치해야 한다. 위와 같이 시작을 하게 되면 몇가지 파일 앱이 생기게 되는데,

 

Node_modules

-> NPM을 통해 설치된 라이브러리를 확인할 수 있다.

 

Package.json

-> 프로젝트를 관리해주는 파일이다. 프로젝트 이름, 버젼, 라이브러리 관한 depandency가 정의되어 있다. React와 관련된 패키지들이 설치되어 있다.

 

App.js

-> 리엑트를 개발할 때 기본 구성들이 있다.

 

React Element

React DOM에서 표현 및 관리되는 UI 조각, 레고처럼 작은 블록이라고 보면 된다.

 

---

React Componet

재사용 가능한 독립적인 UI 구성 단위, 리엑트를 사용할 때 가장 많이 사용하는 단어이다. 잘게 쪼게서 재사용이 가능하도록 한 구성 단위이다.

 

* 리엑트에서는 단방향 데이터 흐름을 권장합니다.

• 부모가 자식에게 일방적으로 전달(위에서 아래로), 수직적인 구조의 직장, 상명하복과 같은 개념이다.
• props인자를 사용한다. 함수에 인자를 넘기는 것과 비슷하게, 컴포넌트에 인자를 넘겨줘서 인자에 맞게 결과물이 바뀌는 듯한 느낌으로 이해하면 된다.

 

* 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달이 된다. 아래의 그림을 보면 이해하기 편하다.

List라는 부모 컴포넌트가 있고 하위에 다양한 컴포넌트들이 있다. 

 

* 컴포넌트가 무엇이며, property(인자)가 위에서부터 아래로 어떻게 전달 받는지 감이 와야 한다!

 

 

 

아래 코드는 index.js에 대한 코드이다.

import React from "react";
import ReactDOM from "react-dom";
import HelloComponent from "./HelloComponent";

function App() {
  return (
    <div>
      <HelloComponent textSize={13} textColor={'white'} name={'양석진'} age={27}/> 
      <HelloComponent textSize={30} textColor={'green'} name={'둘리'} age={100}/>
      <HelloComponent textSize={50} textColor={'pur'} name={'도우너'} age={14}/> 
      <div>
        #원래는 이렇게 코드를 직접 넣어서 했지만 위와 같이 인자를 넣어서 할 수 있다.
        #하지만 코드가 커지고 그러면 아래와 같은 방법이 효율이 떨어진다. 
        #하지만 동작자체의 성능은 동일하다. 다만 편의성을 위해서 사용하는 것이다.
        <h1>이름: 양석진</h1>
        <b>나이: 15</b>
      </div>
      <div>
        <h1>이름: 양석진</h1>
        <b>나이: 15</b>  
      </div> 
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));
#React를 DOM으로 렌더링해서 보여주겠다는 코드이다.

 

해당 컴포넌트, 최상단에 있는 컴포넌트를 컨테이너라는 애한테 보여주겠다! 라고 정의를 한 것이다.

 

컴포넌트가 있으면 이를 페이지에 보여줘야 하는데, 어떤 컴포넌트를 보여줄 것인가? 바로 최상단 컴포넌트를 보여주는 것이다.

 

 

아래 코드는 컴포넌트를 만들어서 따로 빼놓은 코드이다.

import React from "react";

function HelloComponent(props) {
  return (
    <div style={mystyle}>
      <h1 style={{
        fontSize: props.textSize,
        color: props.textColor}}
        >
          이름: {props.name}
        </h1>
      <b>나이: {props.age}</b>
    </div>
  );
}

const mystyle = {
  textColor: "blue",
  backgroundColor: "DodgerBlue",
  padding: "10px",
  fontFamily: "Arial"
};

export default HelloComponent;

위의 HelloComponent에 대한 컴포넌트를 index.js에서 사용하는 것이다.

 

function HelloComponent(props) {
  return (
    <div style={mystyle}>
      <h1>이름: {props.name}</h1>
      <b>나이: {props.age}</b>
    </div>
  );
}

const mystyle = {
  textColor: "blue",
  backgroundColor: "DodgerBlue",
  padding: "10px",
  fontFamily: "Arial"
};

export default HelloComponent;

 

Virtual Dom(React Dom)

• React에서 기본 DOM의 단점을 해결하기 위해 사용하는 기술이다.
• 엘리먼트와 자식들을 전의 것과 비교하여 바뀌는 부분만 변경되게 만든다. 변경되는 부분만 실제 DOM에서 기존과 같은 부분은 그냥 짤라지고
• React를 사용하는 이유이기도 하다.

 

React를 사용하는 이유?

• 체계적이고 유지 보수가 편리한 앱 제작이 가능유저들이 사용하기에 충분히 빠르다. 
• 자바 스크립트, native도 어플리케이션 제작도 가능
• 큰 규모에서도 퍼포먼스가 좋고 테스팅이 수월
• React의 개념 그대로 모바일 어플리케이션을 제작
• 하이브리드 앱과는 다르다. (웹 뷰를 기반으로 제작된 앱, 쇼핑 앱들과는 다르다)
• React Native를 사용한 앱은 대표적으로 페이스북, 인스타그램이 있다. 공통점으로 비주얼적으로 훨씬 부드럽다.
• JavaScript로 ios, android 개발 가능
• 페이스북과 피드를 봤을때 post관련해서 모두 컴포넌트 구조 
• React Native같은 경우는 자바스크립트로 멀티 플랫폼 어플리케이션을 동시 개발 가능
• 자바 스크립트를 배우게 되면 거대한 커뮤니티, 많은 공급 수요, 프론트엔드 백엔드, 웹, 앱, 테스크탑 제작 활용, 스타트업에서 특히 환영받음
• 적은 리소스로 많은 효율을 끌어낼 수 있음

 

 

 

Q&A

1. 자바스크립트에서 사용할 수 있는 라이브러리라고 보면 된다. npm은 패키지라고 말하는데, 우리는 보통 라이브러리라고 사용한다. 그냥 같은 말이라고 생각하면 된다!

 

2. React를 공부하는 방법

• 클론 코딩 -> 니콜라스, 노마드 코딩
• 개념 먼저x. 개념+클론코딩
• 실제로 무언가를 만들면서 개념을 쌓아라.