React(Intro)

📍 Why React?

Web Application의 발전

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 됩니다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 입니다.

Frontend Framework(Library)

Angular

2010년 Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있습니다. 무겁고 배우기 어렵다는 단점이 있습니다.

Vue

2014년 Evan You라는 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠릅니다.

React

Facebook에서 개발된 라이브러리. 리액트는 오로지 View만 담당. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다.
페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.

What is React?

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 입니다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트합니다.
가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술입니다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아집니다.

Component

컴포넌트의 정의

재활용 가능한 UI 구성 단위

컴포넌트의 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

Class vs Functional Component

Class형 컴포넌트(Class Component)

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.

Functional Component

Hook 기능이 추가되면서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고 그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트가 더 많이 사용되기 시작했습니다.

JSX

JSX 정의

• JavaScript Syntax Extension
• JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
• cf) 바벨(Babel)

JSX 특징

• 자바스크립트 표현 : { ... javascript... }
• class -> className
• Inline Styling : <div style={{color : "red"}}>Hello React</div> -> 아주 간단한 프로젝트에서 사용
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)

JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 합니다. Fragments(<> </>)는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.

💡 배운점

처음 접하는 리액트 단어, 문법 등 모든것이 어색해서 어렵습니다. 하지만 리액트를 공부하며 자바스크립트도 같이 실력을 쌓으면 더욱 효율적이고 가독성 좋은 코드를 작성할 수 있을 것이라고 생각합니다. 길고 긴 코드가 나중에는 얼마나 더 짧고 간단해지게 될지 기대됩니다.
그리고 참 개발공부는 더더욱 깊고 새롭다는 것을 다시 한번 깨달았습니다..😇