🎯 React?
사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
🙋🏻♀️ 지금까지의 이해로는 JavaScript 효율성을 높이기 위해 사용하는 치트키. 예를들어 서울에서 부산까지 더 효율적으로 가기 위해 KTX 운전 법을 배워 조종하는 것
-
리액트와 같은 프론트엔드 Library 또는 Framework를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점. 선언적인 개발이 가능하게 됨
-
UI를 자동으로 업데이트 하는 과정에서 Virtual DOM을 통해서 최적화를 구현
📌 Virtual DOM
이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술
- 불필요한 UI 업데이트를 줄인다
- 돔 처리 횟수를 최소화해 효율성이 높아진다
- 성능이 좋아진다
누군가에게 심부름을 시킬 때,
1) 버터가 필요해
2) 주스가 필요해
3) 사과가 필요해
라고 따로 따로 요청하는 것이 아니라 한 번에 모아 요청 하는 것
📌 Node & NPM
자바스크립트는 단순한 텍스트의 나열이어서 이 코드들이 의미를 가지려면 실행 도구들이 필요. 자바스크립트를 해석하고 실행할 수 있는 도구들이 자바스크립트 실행 환경이라고 부르고 그것은 브라우저이다.
✏️ Node
Node는 브라우저 바깥 환경에서도 자바스크립트를 실행할 수 있게 만드는 환경. 탈 web.
Node가 생긴 이유는 개발시장이 커지면서, 웹 브라우저 이외의 환경에서도 자바스크립트를 이용해 개발하고자 하는 니즈가 커졌다.
✏️ Node Package Manager(NPM)이란?
Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
package = 실행 할 수 있는 하나하나의 프로그램
Node가 스마트 폰이면
NPM은 App store라고 비유 할 수 있음
📌 Create React App (CRA)
리액트 프로젝트를 시작하는 데 필요한 개발 환경을 세팅 해주는 도구 (tool chain)
- 리액트는 UI 기능만 제공. 따라서 개발자가 직접 구축해야 하는 것들이 많음
- 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려움
- "If you're learning React or creating a new single-page app, use Create React App."
- CRA는 리액트로 웹 app을 만들기 위한 환경 제공
- CRA를 이용하면 하나의 명령어로 리액트 개발 환경 구축 가능
NPM으로 Node로 구동할 수 있는 여러가지 packages를 다운로드 받을 수 있다
CRA는 리액트로 프로젝트를 구성 할 때 필요한 packages를 자동으로 다운로드 받아줌
node modules는 NPM으로 다운 받은 모든 packages가 저장되어 있는 폴더
package.json 우리 프로젝트에 대한 정보들이 기입된 파일
- script: 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
- dependency: 프로젝트에서 필요로하는 다른 패키지들에 대한 정보가 있는 곳
- .gitignore: git으로 관리하지 않을 파일 또는 폴더 등을 기입해두는 파일
Index HTML: HTML의 entry point. 사용자가 우리 프로젝트를 요청하며 최초로 보여지는 html
Index JS: JavaScript의 entry point. Html과 React 컴포넌트를 연결해주는 다리 역할
Index App.js: 실제 화면에 보여지고 있는 컴포넌트
📌 Components
재사용 가능한 각각의 독립된 모듈, 재사용 가능한 UI 구성 단위
예) 레고블록
components를 사용하면
- 가독성 ↑
- 재사용성 ↑
- 유지보수 ↑
- 부모 컴포넌트는 자식 컴포넌트를 포함
예) '자동차 문'의 컴포넌트는 '손잡이'라는 자식 요소의 컴포넌트를 포함시키고 있음. 언제든 손잡이 부분만 떼어서 변경 가능
어떠한 레고블록이 컴포넌트로 구성되어 있으면 일부분을 바꾸려고 할 때, 그 부분만 떼어서 변경 가능하다. 컴포넌트 요소로 구성 되어 있지 않다면 변경이 어려움.
✏️ Components의 두 가지 타입:
1) class component:
- 초기에 많이 사용된 형태
- 함수형에 비해 문법과 사용법이 복잡함
- 클래스 형태로 작성된 코드가 많이 남아있기에 읽고 해석할 줄 알아야 함
2) function component:
- 클래스형에 비해 간단하고 단순
- 초반에는 state를 관리 하지 못한다는 단점으로 사용하지 않았음
- React 16.8 버전에서 hooks라는 기능이 추가되면서 state를 관리할 수 있게 된 후로 부터 자주 사용 됨
- 현업에서 가장 많이 사용되고 있음
📌 JavaScript Syntax Extension (JSX)
- 리액트에서 사용하는 자바스크립트 확장 문법
- React에서 매우 길~게 사용해야되는 HTML을 짧게 줄여주는 것
- JavaScript와 HTML을 합쳐 놓은듯한 형태
- Mark up을 편리하게 작성하기 위한 문법
- JSX로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이어서 Babel이라는 패키지를 이용해서 변화해줘야 함
<div>Hello World</h1> =>
React.createElement('div', null, "Hello World")- 원래 리액트에서 div를 만드려면 아래와 같이 사용. 하지만 이러면 리액트를 배우지 않고 도망갈 수 있음. 그래서 JSX가 사용
React.createElement('div', null, 'Hi Melon!')✏️ JSX 장점
- HTML tag를 그대로 사용하기에 익숙함
- HTML 마크업과 JS 로직을 같이 구현할 수 있음
- JS 문법을 이용해서 HTML을 생성할 수 있음
- 기존 DOM + event 작동 방식과 비교해서 훨씬 더 간편하게 UI를 구성할 수 있음
✏️ JSX 특징
- 반드시 하나의 부모 태그안에 감싸져 있어야 함
- 모든 태그가 셀프 클로징 가능
- 모든 태그를 camelCase로 작성
- 자바스크립트 동작 가능
🎯 위코드 강의를 바탕으로 작성 됨
