1. 리액트의 모듈화 아이디어
우리가 실제로 만들어야 하는 웹사이트는 간단하지 않다.
실제로 HTML/CSS, Javascript를 배우면서 여러가지 용어들과 함수들을 사용하다 보니
간결하게 하려 했던 코드들이 자연스럽게 길어질 수 있고 반복적인 코드들이 들어갈 수 있다.
예를들어 메인 페이지를 위해 필요한 CSS, Javascript 코드가 하나의 style.css, 하나의 script.js 파일에
들어있다고 한다면? 아래와 같은 단점들이 생긴다.
= 구현해야 하는 기능이 많아져서 Javascript 가 복잡해지면 하나의 script.js 파일 안에 모든 코드를 넣기가 힘들어 진다. ex) 이 script 코드가 어떤 element 를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아진다.
ex) 변수 선언 시 겹치지 않도록 계속 신경써줘야한다.
단점들을 보완하기 위해서는 여러개의 css와 js파일로 분리하게 되는데
분리할 때
1) 어떤 element 들 + 2) 그 element 들을 꾸미기 위한 style + 3) 그 element의 동작에 대한 script 를 묶고 이 묶음들의 집합으로 최종적인 HTML 을 만들 수 있다면 어떨까?
하나의 파일에서 html, css, js를 한번에 파악할 수 있기 때문에 컴포넌트들은 가독성이 아주 우수하다.
2. 라이브러리와 프레임워크의 차이점
Web Application Framework
Web Application 을 만들기 위해 필요한 여러가지 기능들을 제공한다.
Web Application 은 공통적으로 어떤 기능이 필요할까?
리액트는 UI 라이브러리 이기 때문에 이와 같은 기능들을 직접 구현하거나 구축 해야 한다.
장점: 각자 환경에 맞거나, 마음에 드는 라이브러리를 선택하여 시스템을 구축할 수 있다.
단점: 여러가지 라이브러리를 접하고 배워야해서 초기 진입 장벽이 있다.
이미지 출처:zero-base