1) ✍Web Application 발전
사이트에 들어가면 보여지는 것(UI : User Interface)과 할 수 있는 것이 굉장히 많아졌다. 이런 이유로 요즘은 웹 페이지 라는 단어 보다 웹 어플리케이션이라는 단어가 많이 쓰여지고 있다.
이렇게 규모가 커짐에 따라 처리해야 할 것들이 많아지고 이전의 방법들(DOM,jQuery)으로는 개발하고 유지보수 하기가 어려워졌다.
이에 따라 방대한 양의 데이터 관리와 유지보수를 편리하게 하기 위해 다양한 Frontend Framework 라이브러리(Library)가 등장하게 된다. 대표적으로는 Angular,Vue,React가 있다.
1-2)✍다양한 Frontend Framework Library
- Angular 구글에서 개발한 Framework,TypeScript 기반으로 만들어짐.안정적이고 탄탄한 개발이 가능하다.하지만 어렵다는 단점이 있음
- Vue Evan You라는 개인이 개발한 Framework.코드가 깔끔하고 배우기 쉽다는 장점이 있다.2014년에 개발 되었는데 이러한 장점으로 인해 발전 속도가 빠르다.
- React 페이스북에서 개발한 Library로 앞서 소개한 Angular과 Vue와는 다르게 오로지 View만 담당한다.그렇기 때문에 React-router,Redux를 함께 사용한다.(*이러한 문제 때문에 CRA를 만들었다.CRA는 리액트로 웹 어플리케이션을 만들기 위한 환경을 제공한다.이것을 이용하면 하나의 명령어로 리액트 개발환경을 구출할 수 있다.)현재 많이 사용하고 있는 Library이다.
사용자 UI를 만들기 위한 JS 라이브러리이다.리액트와 가은 프레임워크를 사용하는 가장 큰 이유는 UI를 자동 업데이트 한다는 점이다. 가상 DOM(Virtual Dom)을 통해 업데이트한다.이 기술을 통해서 불필요한 업데이트는 줄이고 성능은 좋아졌다.
2)✍ Component & JSX
Component는 재활용 가능한 UI 구성 단위이다. 예를 들어 저번에 클론 코딩 때 만든 페이지를 Component로 나눈다면 
총 4군데가 될 것이다.(피드 이미지까지 생각하면 총 5군데.)
큰 틀로 나눌 수 있을 것이다.
이와같은 Component 의 특징으로는,
▪유지보수가 쉽다.(Nesting)
▪재활용하여 사용할 수 있다.
▪한눈에 파악하기 쉬워 어떻게 페이지가 구성 되었는지 알 수 있다.
▪컴포넌트는 또 다른 컴포넌트를 포함 가능하다.
Component 종류로는 총 두 가지가 있다.
▪ Class형 컴포넌트
▪ function형 컴포넌트
함수형 Component는 간단하고 단순하지만 state를 관리가 힘든다는 점으료 잘 사용되지 않았지만 React 새로운 버전에서 Hook 기능이 추가 되면서 state 사용이 가능해졌고 그 후 부터 많이 사용 되었다.
2-1) JSX
JSX는 React에서 사용하는 JS확장 문법이다. JSX 장점으로는 HTML 태그를 그대로 사용하기 떄문에 보기 쉽다. 또한 동시에 자바스크립트도 JSX안에서 동작하게 할 수 있다.
JSX 특징으로는,셀프 클로징이 가능하다는 점이 있고
ex) <div></div> → <div />
class → className
모든 요소를 감싸는 최상위 요소가 있어야 한다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에서 여러 자식들을 그룹화 할 수 있게 하는 기능이다. 이는 div 태그의 불필요한 생성을 막을 수 있다🤷♀️❗
드디어 div지옥에서....Gooooood
📝 ✏️ TIL
간단한 작업을 할 때는 React의 중요성을 깨닫지 못했지만 코드가 점점 길어지면서 이보다 더 방대한 작업을 할 때 내가 과연 내 코드를 기억할 수 있을까?유지보수는? 이라는 걱정스러운 의문점이 생겨났다.
(특히 네이밍에 대한 고민도 깊어져갔다...❗)
그러다 기가막힌 타이밍에 React를 배웠고 어떠한 흐름으로 React가 생겼는지 또 무엇인지 어떻게 사용이 되는지를 배우게 됐다. 배우면서 개발을 할 때 가독성과 효율성을 따지면서 코드를 짜는 것이 얼마나 중요한지 알게 됐다.
