Virtual DOM
virtual DOM에서는 이전 기록에서 다룬 적 있다.
[React] 리액트 특징, 라이프 사이클
페이스북이 만든 사용자 UI 구축을 위한 라이브러리 오직 사용자의 View 에만 초점을 맞춘다. 리액트의 대표적인 3가지 특징 JSX문법 의미 : 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할
choi-records.tistory.com
간단히 말하면,
Virtual(가상) DOM은 메모리에 가상의 DOM을 저장했다가
리렌더링시에 변경 사항을 반영해서 렌더링함으로써 성능을 향상한다.
자세한 설명은 위의 기록을 참고하자.
리액트 & NodeJS
NodeJS는 자바스크립트의 런타임이다.
자바스크립트는 브라우저에서만 동작이 가능한 언어였다.
하지만 NodeJS가 자바스크립트의 실행 환경 역할을 해줌으로써 지금처럼 사용할 수 있게 된 것이다.
리액트는 JS로 동작하는 라이브러리이다.
때문에 리액트는 node 위에서 동작하는 것이다.
CRA(Create React App)
CRA는 CLI 도구이다.
처음 React로 프로젝트를 시작하려고 하면, 막막하기만 하다.
웹팩 등 추가로 학습해야 하는 개념이 많기 때문이다.
React 입문자들이 쉽게 React를 애플리케이션을 개발할 수 있도록
페이스북에서 제공하는 CLI 도구가 CRA인 것이다.
Node_Modules
먼저 모듈은 쉽게 말해 여러 기능들이 모여 있는 파일이다.
기능을 모듈화함으로써 유지보수성과 재사용성을 얻을 수 있다.
Node_Modules 폴더는 위의 모듈을 모아놓은 폴더이다.
초기에는 CRA 과정에서 초기 세팅에 필요한 모듈들이 해당 폴더에 들어가며,
이후에 라이브러리를 npm을 이용해 다운로드하면 Node_Modules에 추가된다.
Npm&Yarn
npm과 yarn은 모두 패키지 관리 툴이다.
위에서 언급했던 node module을 다운로드하고, 해당 모듈의 버전을 관리해 준다.
yarn은 npm의 단점을 보완하기 위해 만들어졌다.
먼저 속도의 측면에서, yarn은 중복되는 데이터를 캐시에 저장함과 동시에
여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 npm보다 빠른 속도를 가진다.
또 보안의 측면에서도 npm의 단점을 보완한다.
npm은 패키지에서 사용하는 다른 패키지 또한 설치하기 때문에 보안에 문제가 생길 수 있지만,
yarn은 package.json과 yarn.lock 파일에 있는 패키지만 설치하기 때문에 보안의 측면에서도 우수하다.
하지만 아직 많은 개발자가 npm을 사용하고 있어
접근성 측면에서는 npm이 앞서고 있다.
JSX
JSX는 React에서 렌더링 로직과 UI 로직을 연결하기 위해
JS를 확장한 만든 문법이다.
<h1>Hello, world!</h1>위처럼 HTML의 태그를 사용하지만 내부에 JS표현식을 포함할 수 있게 했다.
쉽게 말하면, UI 관련 작업과 해당 UI에 대한 로직 작업을 같이 할 수 있게 한 것이다.
렌더링 로직과 UI 로직을 연결하되 컴포넌트라는 유닛으로 관심사를 분리하는 방법을 사용한다.
컴포넌트
컴포넌트는 리액트 애플리케이션의 재사용 가능한 작은 조각이다.
위에서 언급한 대로 React는 렌더링 로직과 UI 로직을 연결하지만
컴포넌트로 관심사를 분리한다.
페이지를 여러 조각으로 나누는 것이다.
분명 페이지들은 공통되는 조각들을 가질 것이다.
그 조각들을 페이지를 생성할 때마다 만드는 것이 아닌 한 조각을 공유하는 것이다.
그리고 그 조각에서는 UI로직과 렌더링 로직을 함께함으로써
비교적 직관적으로 생성할 수 있다.
Props
이제 하나의 조각을 자식 컴포넌트라고 해보자.
자식 컴포넌트는 정적으로 존재할 수도 있지만, 부모 컴포넌트에 의해 동적으로 생성될 수 있다.
여기서 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값들을 props(properties)이다.
props를 이용해 컴포넌트를 생성하면 보다 범용적으로 해당 컴포넌트를 사용할 수 있다.
[React] React 컴포넌트/Props
컴포넌트 생성 방법 import React from 'react' function App(){ return( Hello ); }; export default App; 1. 함수형 컴포넌트 App을 생성한다. 2. JSX문법의 앨리먼트를 리턴한다. 3. App 컴포넌트를 다른 컴포넌트에서 쓸
choi-records.tistory.com
State
React는 동적인 값을 State로 처리한다.
State는 말 그대로 상태값이다.
하지만 state 변수에 값을 할당하는 식으로는 사용이 불가하다.
state는 생성자를 통해 state값을 초기화하는 방법으로 업데이트하는 수밖에 없기 때문이다.
때문에 state의 변화가 일어나면 해당 컴포넌트가 리렌더링 된다.
함수형 컴포넌트에서 state를 사용하는 방법은 지난 기록에서 다룬 적이 있다.
[React] useState로 button과 input 관리하기
State state는 리액트에서 데이터 값을 저장하는 객체이다. state가 아닌 변수에 저장하고 데이터를 변화시키면 update 작업이 일어나지 않아 변수의 변화가 렌더링 되지 않는다. 함수형 컴포넌트에서
choi-records.tistory.com
'Frontend > React' 카테고리의 다른 글
| [React] Formik 라이브러리(Field,Formk, 버튼 선택) (0) | 2023.01.23 |
|---|---|
| [React] React Hook 동작 원리(useState,useEffect) (0) | 2023.01.16 |
| [React] 폰트 깜빡임 현상 해결(Global Style, CSS) (0) | 2022.12.29 |
| [React] Recoil(Atom, Selectors, Atom Effects) (0) | 2022.12.18 |
| [React] Context, useContext, Recoil(전역 상태 관리) (0) | 2022.11.30 |
