[React] 강의 보면서 정리 중

 

bundle.js = 전체 어플리케이션의 컴파일된 자바스크립트

웹펙과 바벨이 기존의 저장소에 있는 여러 자바스크립트 파일들을 하나로 합쳐서 bundle.js 파일 하나로 이용할 수 있게 해 놓음

 

 

리액트는 웹 브라우저에 보여지는 HTML을 만드는 자바스크립트 라이브러리.

컴포넌트(Componenet) 혹은 뷰(View)를 각각 만들게 됨.

여러 개의 다른 컴포넌트를 작성하고 이 컴포넌트들을 다른 방식으로 배치하면서 복잡한 어플리케이션을 보다 간단하게 만들어 줌.

컴포넌트는 HTML을 만드는 자바스크립트 함수의 모음집으로, 자바스크립트로 컴포넌트를 만들 때 컴포넌트는 궁극적으로 HTML로 만들어 짐.

 

JSX = 부분적인 템플릿 혹은 변형된 자바스크립트로, 자바스크립트 안에 HTML처럼 보이는 소스코드를 사용할 수 있게 도와줌. (표면적으로 보이지 않는 자바스크립트)

JSX의 목적은 자바스크립트 코드를 HTML로 만들기 위한 것임

 

 

ES6와 같은 JSX의 const는 브라우저에 의해 해석될 수 없음.

웹팩과 바벨같은 보일러플레이트 패키지의 목적은 JSX를 바닐라 자바스크립트로 변환하여 브라우저가 이해할 수 있게 만든다는 것.

 

 

 

리액트는 두 개의 분리된 라이브러리로 나뉘어짐.

Core React 라이브러리는 리액트 컴포넌트가 어떻게 렌더링되며 어떻게 컴포넌트들을 모으는지 등을 알고 있음

(컴포넌트들을 생성하고 관리)

React DOM은 DOM에 렌더링 하는 기능을 가지고 이 컴포넌트를 가져와 DOM에 삽입함

(실제 DOM과 상호작용)

 

 

ReactDOM은 DOM에 렌더링 하기 전에 컴포넌트를 인스턴스화 해야 한다

 

ES6 문법

* Fat arrow (화살표 함수 ( )=>)

: 리액트에선 때때로 한 컴포넌트 안에 여러 함수를 작성할 필요가 있음.

이는 더 간결하고 압축적인 구문 형태로 함수를 정의할 수 있게 해준다.

이 화살표 함수는 function 키워드를 사용하는 것과 동일함!

값을 제외하고는 더 많거나 적다는 것

* Syntactic sugar

 

모든 파일들은 서로 연결하겠다고 선언하지 않으면 각 파일은 계속 분리된 상태로 있을 것임 ..

 

 

- 리액트 컴포넌트

1. 함수형 컴포넌트 

: 함수로 이루어 졌기 때문에 함수형 컴포넌트라 불림

하나의 함수가 JSX 형태를 반환

2. 클래스 컴포넌트

: 내부적인 정보를 저장하려 할 때 사용

그 자체로 기능을 함

- 클래스: 실제 자바스크립트의 프로퍼티와 메소드로 이루어짐

우리가 생상하는 모든 클래스 기반 컴포넌트는 render 메소드를 정의하고, JSX를 반환해야 함

( 그래서 App 컴포넌트가 해당 js를 렌더링 할 때마다 이전의 일반 함수를 호출하는 대신에 이 render함수를 호출함.

이 render 함수를 정의할 때마다 모든 클래스의 함수에는 JSX를 반환해야만 함, 안그러면 아무것도 안보임)

 

 

- state

스테이트: 자바스크립트의 객체로써, 유저 이벤트를 저장하고 반응하는데에 이용됨

우리가 정의한 컴포넌트 기반의 각 클래스는 그 자체의 스테이트 객체를 가짐

컴포넌트 스테이트가 바뀔 때마다 컴포넌트는 즉시 리렌더링하고 자식 요소들에게도 렌더링하도록 강제함

 

만약 만든 클래스의 값이 변경되면 render()함수가 재실행 됨

 

초기화 필수-> 스테이트 프로퍼티를 클래스의 constructor 메소드 안에 넣는다