리액트 공부 - 개념/렌더링/DOM/JSX/var let 차이

함수형으로 할때 주의할 것

 

*

React.FC = 컴포넌트 

 

*

useEffect-상태를 업데이트 할 때 무한 루프 방지

 

일단...  책에 나와있는대로 클래스형으로 해보았다… 

 

개념을 정리해보자..

*

리액트 

 

자바스크립트만으로 규모가 큰 애플리케이션을 만들 수 있는 시대 

수많은 프레임워크가 조금씩 다른 관점에서 순수 자바스크립트로만 애플리케이션 관리할 수 있도록 노력해옴 (AngularJS, Backbone.js, Vue.js…: 여러 아키텍처로 애플리케이션 구조화)

 

이들의 공통점: Model과 View가 있다 

Model: 데이터 관리 / View: 유저에게 보이는 부분 

 

프로그램이 유저에게 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회, 수정하고 젼경된 사항을 뷰에 반영하는 식 

 

그런데 뷰의 일부만 업데이트 한다면 Application에서 그 요소를 찾아 내부 수정해야하는데 

그러려면 업데이트 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정해야 하고 이게 Application 규모가 크면 복잡해지고 성능 저하도 일으킬 수 있다.

 

이에 페이스북 개발 팀에서 이를 해결하려고 고안한 아이디어가 리액트. 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 게 아니라 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 것. 그러면 어떤 변화를 줄지 신경 쓸 필요가 없고 그저 뷰가 어떻게 생길지 선언하며 데이터에 변화가 있으면 기존에 있던 것은 버리고 규칙에 따라 새로 렌더링 하면 됨.

 

리액트는 즉, 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용. 

구조가 MVC, MVW 등인 프레임워크와 달리 오직 뷰만 신경쓰는 라이브러리. 

 

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 = 컴포넌트 

다른 프레임워크에서 유저 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념. 

템플릿 = 데이터셋 주어지면 HTML 태그 형식을 문자열로 반환

컴포넌트 = 재사용 가능한 API, 수많은 기능 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새, 작동 방식 정의

 

사용자 화면에 뷰를 보여주는 것 = 렌더링 

리액트 컴포넌트가 최초로 실행한 <초기 렌더링> / 데이터 변경으로 다시 실행되는 <리렌더링>

• 초기 렌더링 

render() { . . . }

• 리렌더링 

새로운 데이터로 렌더함수 다시 호출하면 그 데이터를 지닌 뷰 생성 

하지만 이때 렌더함수가 반환하는 결과를 바로 dom에 반영하지 않고 이전 render 함수가 만든 컴포넌트 정보와 비교. 

그리고 둘의 차이를 알아내 최소한의 연산으로 dom 트리 업데이트 

 

*

Virtual DOM

 

DOM = Document Object Model 

객체로 문서 구조 표현 (XML, HTML)

DOM을 활용하여 객체에 자바스크립트와 CSS 적용 

트리 형태 

 

1. 데이터 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM 내용과 비교 

3. 바뀐 부분만 적용 

 

*

import React, { Component } from 'react'; //컴포넌트: 모듈화. 재사용 가능 

//이런 모듈들은 var fs = require(‘fs’); 이렇게 불러와 사용 가능

//fs = Node.js 내장 모듈 중 파일 읽고 쓸 떄 사용하는 모듈 

//2015년 이후 방식 import fs from ‘fs’;

import logo from './logo.svg';

import './App.css';

 

class App extends Component {

//클래스 App 선언 + 리액트 라이브러리 내부 Component 클래스 상속 

//새로운 컴포넌트 만들 때는 이렇게 클래스 선언하는 것!

//* 감싼 div 안에서는 주석 불가능 

  render() {

    return(

    <div className="App">

      <div className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <h2>Welcome to React</h2>

      </div>

      <p className="App-intro">

        To get started, edit <code>src/App.js</code> and save to reload.

      </p>

    </div>

    );

  }

}

export default App;

 

*

JSX = 리액트용 문법 

 

컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 함 

 

class App extends Component {

  render() {

    return(

      <div>

        <h1>와우 </h1>

        <h2> 오와우우 </h2>

      </div>//여기서 div 없으면 오류남 

    );

  }

}

 

Virtual DOM에서 컴포넌트 변화 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부가 DOM 트리 구조 하나여야 한다는 규칙 때문 

 

 render() {

    const text = 'LUVerDuck';

    return(

      <div>

        <h1>와우 </h1>

        <h2> 오와우우 </h2>

        <h3>{text}</h3>

      </div>

    );

  }

 

Cosnt는 한번 지정하고 나면 변경 불가능 상수 선언 

Let 동적인 값 담을 수 있는 변수 선언 

이전에는 var 사용 

 

*

근데 var와 let도 차이가 있음 

 

function myFucntion() {

  Var a = “hello”;

  if(true){

    Var a = “bye”;

    console.log(a); // bye

}

console.log(a); // bye 

}

 

function myFunction(){

  let a = 1;

  if(true) {

    let a = 2;

    console.log(a); // 2  

}

console.log(a); // 1

}

 

let과 const는 scope가 함수 단위가 아니라 블록 단위라서 if문 내외부 선언한 a값이 다르다

같은 블록 내 중복 선언은 불가 

특히 const는 한번 선언하면 재선언 불가 

const b = 1;

b = 2; // 오류