ㄱ. 어떤 문제를 해결하기 위해서 나온 것일까?
ㄴ. 왜 리액트를 배워야 할까?
ㄷ. 기존의 프레임워크 ( 앵귤러, 뷰 ) 와 어떤점이 다른지.
▶ 페이스북에서 만든 자바스크립트 라이브러리
▶ UI 라이브러리
✋ 여기서 잠깐!
라이브러리
- 프로그램을 제작할때 필요한 기능 ( 단순 사용이나 재사용이 가능한 도구들의 집합 )
- 예시 : 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백
- " 자동차의 일부 부품들을 가지고 개발자가 새로운 자동차를 만드는 것"
- " 우리가 원하는 재료들을 골라서 우리 입맛에 맞게 집을 지을수 있다. 그래서 조금조금의 만들어진 부품 하나하나들을 라이브러리라고 할수 있다."
즉, UI 를 관리하는 라이브러리, routing 에 관련된 라이브러리, state 를 관리할수 있는 라이브러리 등 개발자들이 필요한 기능에 따라서
라이브러리들을 골라서 사용할수 있다.- 대표적인 언어 : React
프레임워크
- 프로그램의 기본 뼈대나 구조
- 예시 : 자동차 프레임 / 집의 구조나 철제들이 완성된 상태의 완성품
- 프레임워크 만으로는 실행되지 않기 때문에, 그 안에 기능들을 추가해야 하며,
프레임워크에 의존하여 개발해야 하기 때문에, 프레임워크가 정의한 규칙을 준수해야 한다.- " 자동차 프레임 안에 개발자들이 자동차의 일부 부품(필요한 코드들)들을 넣어서 자동차가 돌아가게 하는 것 "
- " 벽돌의 색깔을 바꿔서 벽돌을 붙이거나 집안의 가구를 재배치 하는 등의 일들을 할수 있다 "
- 대표적인 언어 : Angular , View
- Angular
- UI 뿐만 아니라, routing 과 state 를 관리할수 있는 방식, 그리고 HTTP 등의 다양한 기능들이 한번에 묶어져서 제공된다.
- Angular 로 웹 어플리케이션을 만들려면, Angular에서 제공하는 기능들을 사용해서 만들어야 한다.
- View
- Angular 만큼 제공하는 기능들이 많이 없다.
- State 관리와 HTTP 기능이 없다.
- 프레임워크랑 라이브러리의 중간
★ 개발세계에서, 조금 복잡한 웹 어플리케이션을 만들때 MVC[^1] 이라는 디자인 패턴을 많이 사용하는데, React 는 이중에서 V ( View ) 레이어를 담당하고 있다.
[^1]: MVC : Model / View / Controller 의 줄임말로, 세개의 레이어로 나누어서 디자인하는, 디자인 패턴
[^2]: 사용자에게 보여지는 UI를 만들고 그 위에서 사용자의 행동(사용자의 이벤트)에 맞게 반응하도록 만들어진 라이브러리
▶ React 는 컴포넌트듣로 이루어진 UI 라이브러리이다.
✋ 여기서 잠깐!
컴포넌트
- 한가지의 기능을 수행하는 UI 단위
- 각각의 독립적인 컴포넌트 단위들을 서로 조립해서 만들은 것 리액트 어플리케이션이라고 할 수 있다.
- 컴포넌트도 DOM Tree 처럼 하나의 Virtual DOM Tree 라는 Tree 형식으로 만들어져 있다.
- React 에서의 컴포넌트는 모든 것이라고 할 수 있다.
즉, A 라는 하나의 컴포넌트를 만들고 나면, A 컴포넌트가 여기에서도 동작하고, 저기에서도 동작하는 하나의 단위를 말한다.
- 예시1 : 태그를 index.html 에서도 의 역할을 하고, index2.html 에서도 의 역할을 하는 것에서 볼수 있는 태그 같은 하나의 단위.
- 예시2 :
- img 도 컴포넌트
- input 도 컴포넌트
- img 와 input 을 묶은 div 도 컴포넌트
- div들이 모여있는 하나의 page 도 컴포넌트
React 에서 제공하는 컴포넌트라는 Class 함수 컴포넌트를 상속(extends)해야 한다. : " class LikeButton extends Component{ } "
그리고, LikeButton 이라는 Class 함수 컴포넌트 안에는 state 부분과, rendering 하는 부분, 이렇게 두가지로 나눠 볼수가 있다.
▶ 이름을 가지고 있는 하나의 Class 함수 컴포넌트 안에 들어있는 데이터를 나타내는 객체(Object)
▶ 사용자가 보는 View port 에, 어떻게 보여질지 html 과 비슷하게 생긴 JSX 라는 것을 사용하여 구현하는 함수
▶ React 는 데이터가 업데이트가 될 때마다 어플리케이션 전체를 Re-render 하는데, 이렇게 어플리케이션 전체를 Re-render 하는 자체를
React 로 만든 어플리케이션은 쉽게 할수 있다.
★ 근데 state 가 변경이 될때마다 모든 render 함수가 재호출되는 건 성능에 안 좋지 않을까?
React 가 가지고 있는 DOM Tree 를 말한다.
업데이트해야 되는 내용들을 모았다가 한번에 다 같이 업데이트 하기 때문에 성능이 좋다.
★ Create React App : 스크립트. 공통적으로 설정해서 쓰는 개발환경을 손쉽게 한번에 설치해서 쓸수 있도록 해주는 Tool.