숨니의 개발일지

1. 컴포넌트별로 따로 분리되어 있어서 재사용이 용이하고 유지보수가 가능하다.

2. JSX라는 자바스크립트의 확장문법이 HTML 문법과 사용이 비슷하여 예측가능한 개발이 가능하다.

3. Virtual DOM이 바뀐 부분만 새로 데이터를 로드해서 효율적인 DOM 제어가 가능하다.

4. 서버사이드 렌더링을 지원한다.

5. ES6 지원

----------------------------------------------------------------------------------------------------

★ 컴포넌트란?

-> 기능을 단위별로 캡슐화하는 리액트의 기본 단위

★ Props란?

★ State란?

★ render란?

★ 모듈(라이브러리)이란? 함수 또는 특정기능을 온전히 수행할 수 있도록 기능별로 묶은 단위

★ DOM이란? Document Object Model로 문서객체모델이다.

작성한 소스코드가 브라우저에의해 파싱되면 DOM이 된다. 

★ HTML 문서의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들고

웹 브라우가 그것을 인식하는 방식을 말한다.

★ Virtual DOM을 왜 쓰는가?

DOM 조작이 많이 발생하면 그 변화를 적용하기 위해 브라우저가 연산을 해야하고

그로인해 프로세스를 비효율적으로 만든다

-> View에 변화가 있으면 그 변화를 가상 DOM에 먼저 적용시키고

그 결과를 실제 DOM에게 전달해주면 브라우저 내의 연산의 양을 줄이고 성능이 개선된다.

★ 렌더링이란? 웹 페이지 접속 시, 그 페이지를 화면에 그려주는 것

★ 서버사이드 렌더링이란? View에 어떻게 보여줘야될지 서버에서 해석하는것

★ 클라이언트 렌더링이란? 빈페이지를 서버에서 제공, 클라이언트에서 자바스크립트를 통해 렌더링

★ 리액트를 써서 서버사이드 렌더링을 해야하는 이유

-> SEO (Search Engine Optimization) 검색엔진 최적화

클라이언트 렌더링을 하는 경우 View 생성전까지 HTML 내용을 알 수 없기 때문에 제대로 된 검색 수행이 불가

★ 리액트 JS는 서버와 클라이언트가 같은 코드를 사용한다는 (Isomorphic Javascript)동적 자바스크립트의 형태를 띈다

★자바스크립트란? 웹 페이지에 동적인 요소를 구현하기 위해 발명

★ ES6를 사용하는 이유: ECMA Script는 스크립트 언어의 표준 : 스크립트언어가 널리퍼지면서 호환성 이상없이 구동되기 위한 규격이 필요했다. 기존버전과 호환성 문제등

기존 자바스크립트에서는 호이스팅(Hoisting)이 되는 관계로 변수나 함수가 전역에서 사용될 수 있었기 때문에

이름으로 충돌을 일으키는 경우가 많아서 모듈시스템을 이용하기 어려웠다.

호이스팅(Hoisting)이란 : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 끌어올려지는것을 말한다.

기존 코드 : 변수 x 선언 및 할당을 해주었다.

첫번째 console.log(x)실행 결과를 보면 에러가 뜨는 것이 아니라 undefined 로 나오는 것을 볼 수 있는데

그 이유는 호이스팅 된 코드를 보면 이해가 쉽다.

function getX(){
 console.log(x);	// undefined
 var x = 100;
 console.log(x);	// 100
}
getX();

호이스팅 된 코드 : 실행 순서대로 재정리 

선언과 할당부분이 나눠지고 함수 내 최상단으로 선언부가 끌어올려진것을 볼 수 있다.

이렇게 되면 전역변수가 되고, 그로인해 에러가 아닌 undefined 가 나온것이다.

function getX(){
 var x;
 console.log(x);
 x = 100;
 console.log(x);
}
getX();

이런 문제를 해결하기 위해 ES6에서는 모듈시스템(export, import)로 모듈을 손쉽게 제작, 가져다 쓸수 있다.

(단, 브라우저에서 지원되고 있지 않기때문에 webpack같은 모듈 번들러를 사용해야함)

여기에서 모듈(라이브러리)이란

 - > 재사용 가능한 단위(함수,클래스,객체)들을 다른 프로그램들에서 활용할 목적으로 분리한것

import React from 'react';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header/>
                <Content/>
            </div>
        );
    }
}

export default App;

import 문법

-> import 파일이름

(다른 파일 참조)

-> import 파일이름 as 별칭

(참조한 모듈에 별칭 정하기)

-> import 기능명 from 모듈이름 

(특정 기능만 지정하여 참조하기)

react에 정의된 기능을 React라는 변수안 할당하고 Component라는 클래스에 변수이름.클래스 이름으로 접근

------------------------------------------------------ import 설명 끝, export 설명 시작

React에서 import 할 때, 하단의 코드처럼 중괄호 { } 를 써서 라이브러리를 불러오는 표현도 있다.

이 문법의 차이점은 바로 모듈을 보내주는 방식인 export에서 나온다.

import React from 'react';
import { render } from 'react-dom';

자바 스크립트의 export방식에는 3가지가 있다.

Example.js

const a = 1;

const b = 2;

export { a };

export const c = 3;

export default b;

Example2.js

import d, { a, c as e } from './Example’;

console.log(a, d, e); // 1, 2, 3

a : a는 객체에 담아서 export한다.

c: c는 선언 및 초기화와 동시에 export한다.

const 란? 변수 선언 키워드이며 동시에 상수 선언 키워드이다.

그렇기 때문에 값을 재 할당하는 것이 불가능하고,선언과 할당이 동시에 이루어져야 한다.

즉, 값이 가진 타입의 변경을 제한하겠다는 것이다.

b: b는 default를 붙여줘서 export한다.

->     a,c는 괄호 안에서 불러오고 d는 괄호 없이 불러오고 c는 as e라고 적혀있다.

        여기서 default는 기본이라는 뜻이며, default로 export한 b는 괄호를 사용하지 않아도 export할 수 있다. 

        변수 d가 변수 b를 import한 것 이라는 것을 알 수 있다.

        a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 한다.

        괄호 안의 변수를 바꾸고 싶다면 as라는 키워드를 사용하여 바꿀 수 있다. 

        위의 c as e라고 한 부분은 변수 c의 값을 변수 e로 넘겨준다.

        이것은 두개이상의 패키지에서 같은 변수이름을 사용해 변수가 곂칠때 유용하다.