리엑트는 프레임워크가 아닌 라이브러리!
- 리엑트는 인터렉션이 많은 웹을 개발할 때 주로 사용됨
Angular와 Vue는 프레임워크, React는 라이브러리
프레임워크 vs 라이브러리
- 프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것
라이브러리를 포함하고 내가 작성한 소스코드를 호출함
- 라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것
소스코드에서 어떠한 기능을 구현하기 위해 라이브러리를 호출함
컴포넌트 (Component)
- 정의: 리엑트로 만들어진 앱을 이루는 최소 단위로, 재사용성이 높음
- 종류: 기존에는 클래스 컴포넌트를 주로 많이 활용해서 개발을 진행했으나 React에서 React Hooks를 발표한 이후부터는 함수형 컴포넌트가 더 널리 활용됨
class App extends Component {
render() {
return <h1>안녕하세요.</h1>;
}
}
function App() {
return <h1>안녕하세요.</h1>;
}
브라우저가 그려지는 원리와 가상돔
- 리엑트가 virtual DOM을 사용하는 이유에 대해 알아보자
- 웹페이지 빌드 과정 (CRP: Critical Rendering Path): 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 스타일을 입히고 뷰포트에 표시애서 화면에 나타내기까지의 단계
- 기존의 DOM의 문제점: 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그떄마다 Render Tree가 재생성됨. 즉, 모든 요소들의 스타일을 다시 계산, Layout, Repaint 과정까지 거쳐야 함.
인터렉션이 적은 웹이면 괜찮지만 만약 인터렉션이 많다면? 작은 변화 하나로 인해 앞서 언급한 긴 과정들을 전부 거쳐야 하니 불필요하게 DOM을 조작하는 비용이 너무 큼
- 가상 DOM: 실제 DOM을 메모리에 복사해주고, 데이터가 바뀌면 가상돔에 먼저 렌더링된 후 전후비교를 통해 바뀐 부분만 실제 돔에 적용해줌
바뀐 부분을 찾는 과정은 Diffing, 바뀐 부분만 실제 돔에 적용시켜주는 것은 재조정(reconciliation)
✨ 장점: 변화사항이 30개라고 하더라도 재조정은 최종 1번만 되므로 훨씬 비용적으로 효율적!
초기세팅
설치해야 할 앱
Node.js & Visual Studio Code 설치 후 초기세팅 참고
리엑트 세팅
- 리엑트 앱 설치 방법: 해당 폴더로 비주얼스튜디오 연 후
npx create-react-app ./
- 리엑트 앱 실행 방법:
npm run start
- 이 때,
public 폴더 내의 index.html과 src 폴더 내의 index.js 파일은 이름을 바꿔서는 안됨
- 패키지들은
node modules 폴더 안에 있으며, 용량문제로 삭제하는 경우에는 npm install로 재설치 가능
JDX란?
JSX:자바스크립트의 확장 문법으로, 리엑트에서는 이를 이용해서 화면에서 UI가 보이는 모습을 나타내줌 ← HTML markup + JavaScript
CreateElement를 쉽게 사용하기 위한 목적으로, Babel이 JSX를 자동으로 CreateElement로 바꿔서 컴파일해줌
TailWindCss란?
TailWindCss의 정의: HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크
- CSS 프레임워크: 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음
더 빠르게 스타일링하는데에 도움을 줌
예: Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize ...
TailWindCss의 장점: m-1, flex와 같이 미리 세팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링을 진행하므로 빠른 스타일링 작업이 가능하고, class / id 명을 작성하기 위한 고생을 하지 않아도 됨 (또한 중복되어서 작성했을 경우 발생하는 overhead로부터 자유로워짐!)
