[React] ① React가 주목받게 된 이유

2021.07.19

51번째 포스팅

 

입사 133일차.

그동안 바쁘다는 핑계로 미뤄왔던 리액트를 다시 진행하기로 마음먹었다.

책 2권을 구매해서 필요한 지식들을 습득하기엔 나는 너무 게으르고 멍청했다.

구매한 책들은 최신버전과 맞지 않는다는 점도 한몫했다.

 

그래서 기존의 ToDoList는 잠시 접고, 처음부터 다시 시작하기로 했다.

 

 

0. 출처

① ZeroCho님의 무료 인프런강좌 (링크)

② Do it! 리액트 프로그래밍 정석 (eBook)

③ 초보자를 위한 Node.js 200제 (오프라인 구매)

 

 

1. React?

  ① Facebook이 만든 FrontEnd Framework

  ② Component 기반 = 사용자 정의 태그를 사용할 수 있다

  ③ JSX는 React개발에 도움을 주는 JavaScript문법의 확장판이다

  ④ 화면 출력에 특화된 프레임워크

  ⑤ SinglePage

 

 

2. React가 주목받게 된 이유

  ① WEB에서 App과 같은 UX를 만들 수 있다.

  ② 데이터와 화면의 동기화가 쉬워진다.

  ③ 중복되는 컴포넌트들을 하나로 묶어줄 수 있다. ( 유지보수가 편하다. )

  ④ MVC모델은 코드관리를 효율적으로 할 수 있으나 각 요소의 의존성이 높아 재활용이 어려웠고,

       이 점에 착안하여 Component가 등장하게 되었다고 한다.

 

 

3. JSX

  ① JavaScript + XML / 자바스크립트에 XML을 추가한 확장형 문법.

  ② 컴파일과 최적화가 동시에 일어나기 때문에 빠르다.

  ③ JavaScript 내부에 마크업 코드를 작성할 수 있게 해준다.

  ④ 컨버전방식

 

 

4. JSX attribute (https://velog.io/@edie_ko/React-JSX란-렌더링-Rendering이란)

  ① 속성은 항상 큰따옴표로 감싼다. ( 예 : <div className=”title”>Title</div> )

  ② 태그는 항상 닫혀있어야 한다. (input, br 등 태그도 클로징 태그 필수!)

  ③ 어떤 태그라도 Self-closing tag가 가능하다. (<input /> <div />)

  ④ 형제 노드를 작성할 수 없다. - div나 Fragment태그로 감싸진 형태여야 한다

  ⑤ Virtual DOM > 다음에 나타날 화면의 일부(node)를 미리 그려놓고 변경된 화면의 일부(node)만 수정하는 가상화면기술

 

 

다음포스팅의 주제

[React] ② 클래스 컴포넌트 (Class Component)