강의 내용
React
-
리액트란?
-
리액트(React)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위한 목적으로 만들어짐.
-
주로 단일 페이지 애플리케이션(SPA)의 개발에 활용되며, 컴포넌트 기반 아키텍처를 토대로 한다
-
초기설정(npm, cdn?)
-
둘 다 자바스크립트 라이브러리 및 패키지를 사용하기 위한 방법 중 두 가지 다른 접근 방식
-
npm init -y : 초기화, Package.json 생성됨
-
언팩? CDN?
- CDN 방식 : 로컬 캐쉬 사용 -> 시스템 사용 -> 속도가 느려짐
- 언팩 방식 : 네트워크 통해 객체 주입 -> 속도 향상(script unpkg 첨부)
어떤 것을 선택해야 할까요?
- npm을 사용하는 경우: 프로젝트에 의존성을 명시적으로 관리하고 빌드 프로세스를 사용하는 경우에 적합
- CDN을 사용하는 경우: 간단한 웹 페이지를 빠르게 제작하고자 할 때, 라이브러리를 설치하거나 관리하는 번거로움이 없는 경우에 선택
-
기본개념
-
리액트는 함수가 화면을 생성할 수 있다.
-
리액트 문서(https://ko.legacy.reactjs.org/docs/getting-started.html)
-
JSX
-
JSX
- html, JavaScript
- JavaScript를 확장한 XML 형식의 표현 방법 -
html vs JSX(엄밀히 말하면 자바스크립트)
- class / className
- onclick / onClick
둘의 차이?JSX는 일반적인 HTML 태그와 유사하지만, React의 컴포넌트와 관련된 추가적인 기능을 지원
-
mount와 unmount
-
mount : 화면에 컴포넌트가 나타나는 것
-
unmount : 화면에서 컴포넌트가 삭제
-
Render
-
가상 DOM에 컴포넌트의 뷰를 나타내는 JSX 코드를 반환
-
언제?컴포넌트의 상태나 속성이 변경되었을 때, 그리고 컴포넌트가 생성될 때 발생
실제가 아닌 가상에서?가상 DOM(가상 Document Object Model)은 리액트가 실제 DOM의 가벼운 복사본이다. 리액트는 변경된 부분만을 추적하고 효율적으로 업데이트하기 위해 가상 DOM을 사용한다.
-
Element
-
React앱의 가장 작은 단위, 화면에 표시할 내용 기술
-
엘리먼트(Element)는 웹페이지에서 모든 것을 나타내는 기본 단위이며. 텍스트, 이미지, 버튼 등 화면에 표시되는 모든 것이 엘리먼트
-
React 앱은 여러 개의 작은 부분으로 나누어진 컴포넌트로 이루어져 있고, 각각의 컴포넌트는 엘리먼트로 표현
-
domClient
-
React에서 DOM(문서 객체 모델)과 관련된 작업을 수행하는 데 사용되는
react-dom라이브러리 -
React 앱이 브라우저에 효과적으로 렌더링되고 관리되도록 도와준다
-
Babel
-
바벨은? ES5 하위버전에서 동작하도록 지원해준다. JS를 컴파일해준다.(html, js를 분리해준다)
-
바벨 참고(https://babeljs.io/)
-
React 주의사항
-
리액트는 싱글페이지 처리를 한다 -> JSX리턴 시 형제노드(멀티태그 x) x-> 반드시 fragment태그로 묶어준다(`<></>)
