Why React?
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.
:: Angular
2010년 Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.
:: Vue
2014년 Evan You라는 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.
:: React
“지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 2013년 Facebook에서 개발한 Library. MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화
Frame : 만들어 놓은 코드에서 내가 직접 들어가서 만들어 놓은 도구를 사용
library : 만들어 놓은 틀을 가져와서 내 환경에 맞춰서 쓴다.
What is React?
React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
또한 기존에 HTML,Javascript, DOM, Jquery 는 절차를 따라 갔다면, React는 선언적 상태에 따라서 UI가 변한다. 이로 더욱 절차를 단순화 시켰다.
React는 컴퍼넌트 단위 개발이 가능 해졌다.
Component
컴포넌트란?
- 재활용이 가능한 UI 구성 단위
- 재활용이 가능하여, 코드 유지보수에 좋다.
- 코드 가독성을 높여준다.
- 컴퍼넌트는 또 다른 컴퍼넌트를 포함할 수 있다. (부모-자식 컴퍼넌트)
Class Component
import React from 'react'
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component- 클래스형 컴포넌트에서는 위와같이
render함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.
Functional Component
import React from 'react'
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div>
)
};
export default Component- 함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있습니다.
- 하지만 처음 리액트를 배우는 단계이므로 lifecylce, state, props 등 주요 개념들을 익히기에는 class형 컴포넌트가 훨씬 직관적이고 배우기 쉽기 때문입니다 class형 컴퍼넌트로 먼저 공부 할 계획이다.
오늘의 과제!
만들어본 Westagram을 React로 구현 해보기
