React 입문

1. React 개발 배경

• 애플리케이션의 규모가 커지며 복잡해질수록 처리해야 할 이벤트도 다양해지고, 관리해야할 상태값이나 DOM도 다양해지게 된다. 이에 따라 업데이트 등을 할때도 작업이 많이 복잡해지게된다.
• 이러한 문제점을 해결하기 위해 다양한 프레임워크가 만들어져서 업데이트 하는 작업을 간소화시켜 주었다.
• 하지만 리엑트는 업데이트를 간소화하는 방법에 초점을 둔것이 아니라, 처음부터 다시 새로 만드는 것에서 시작을 하게 되었다.
• 리액트에서는 virtual DOM 이라는 것을 사용하는데, 이는 가상의 DOM 으로 브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM이다. 실제 DOM 이 아닌 JavaScript 객체이기 때문에 작동 성능이 빠르다.
• 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다. 그리고 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시킨다.

2. 리액트란

• React는 JavaScript 라이브러리로, Facebook 에서 만든 오픈 소스 프로젝트이다.
• React 의 가장 중요한 측면 중 하나는 사용자 인터페이스를 빠르고 효율적으로 구축하기 위해 재사용 가능한 사용자 정의 HTML 요소와 같은 구성 요소를 만들수 있다는 사실이다.
• React는 프론트 엔드에서 사용자 인터페이스(UI)를 구축하는데 사용된다. Model View Controller 애플리케이션의 뷰 레이어이다.
• React는 state 및 props를 사용하여 데이터 저장 및 처리 방법을 간소화한다.

3. 리액트를 배우기 전에,

React를 사용하기 전에 미리 알아야 할 개념들이 있다. 선행적으로 JavaScript 개념이 학습되어야 하는데, 그중 중요한 부분을 정리해보려 한다. 그중 대부분은 javascript ES6에서 도입한 개념이다.

3.1  var / let / const

• 키워드 var 의 문제
  1. 함수레벨 스코프
  2. 중복 선언이 가능함
  3. 생략 가능
  4. 호이스팅
• let / const 키워드의 등장
  1. 블록레벨 스코프
  2. 중복 선언 ⇒ SyntaxError 발생
  3. 호이스팅 ⇒ ReferenceError 발생
  4. let = 변경 가능/ const = 변경 불가능(Primitive)

3.2  template string

• 문자열
• ${자바스크립트 표현식} : 표현식은 return의 유무로 결정된다. 따라서 if문이나 for 문은 표현식이 아니기 때문에 넣을 수 없다. 이런 이유로 삼항 연산자를 중요하게 사용하게 되었다.

3.3  arrow function ( ( ) ⇒ { } ) 화살표 함수

• 자신의 this를 만들지 않기 때문에 생성자로 사용할 수 없다.
• 거의 익명함수를 사용한다.
• 인자가 하나면, ( ) 를 생략할 수 있다.
• 리턴만 있으면, { } 생략할 수 있다. (=중괄호 안의 값이 표현식이다.)

3.4 함수.bind (this)

• bind() 함수가 호출되면 새로운 바인딩한 함수를 생성한다.
• bind 함수에 인수로 바인딩 하려는 대상함수를 넣어주면 this가 지정한 객체에 묶인다.

// bind.js 

function hello() { 
	console.log(`안녕하세요 ${this.name}`); 
 } 
 
 const mark = { name: 'Mark' }; 
 const helloMark = hello.bind(mark);
 
 helloMark();

3.5 디스트럭처링 할당 (Destructuring assignment)

• 구조 분해 할당으로 이터러블 또는 객체를 destructuring 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
• 필요한 값만 추출하여 변수에 할당할때 유용하다.
• 배열 디스트럭처링 할당 / 객체 디스트러처링 할당

// 객체 디스트럭처링 할당
const foo = {
  a: '에이',
  b: '비이',
};

const { a, b } = foo;
console.log(a, b);

// 배열 디스트럭처링 할당
const bar = ['씨이', '디이'];
const [c, d] = bar;
console.log(c, d);

const { a: newA, b: newB } = foo;
console.log(newA, newB);

 

3.6  Spread 와 Rest

• ... (점 3개)
• 스프레드 문법은 하나로 뭉쳐있는 여러 값들의 집합(배열 등)을 펼쳐서 개별적인 값들의 목록으로 만든다.
• Rest 파라미터(Rest parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 …을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

3.7 callback 함수

• 전통적으로 비동기 처리를 위해 사용되어진 방법이다.
• 콜백 헬이 발생하고 에러처리가 곤란하다는 한계가 있어서 이를 처리하기 위해 다양한 방법이 등장했다.

function foo(callback) {
  setTimeout(() => {
    // 로직
    callback();
  }, 1000);
}

foo(() => {
  console.log('end');
});
console.log('이것이 먼저 실행');

3.8 async / await

• 기본적으로 비동기 처리를 위해 Promise를 사용한다.
• then 과 catch 등의 메서드를 통해 후속처리를 하고, 비동기 처리 상태가 변화하면 후속처리 메서드에 인수로 전달한 콜백함수가 선택적으로 호출된다.
• async 키워드가 붙은 함수 안에서만 await 키워드를 사용할 수 있다.

function foo(callback) {
  setTimeout(() => {
    // 로직
    callback();
  }, 1000);
}

foo(() => {
  console.log('end');
});
console.log('이것이 먼저 실행');

3.9 Generator 객체

• function*으로 만들어진 함수를 호출하면 반환되는 객체이다.
• function*에서 yield 를 호출하여, 다시 제어권을 넘겨준다.
• 제너레이터 객체에 next() 함수를 호출하면, 다음 yield 지점까지 간다.

// generator.js

function* foo() {
  console.log(0.5);
  yield 1;
  console.log(1.5);
  yield 2;
  console.log(2.5);
  yield 3;
  console.log(3.5);
}

const g = foo();
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);