React
React?
React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다
React 필요성
React를 사용하지 않아도 html,css,js를 이용해서 웹 페이지를 만들 수 있찌만 react를 통해 인터렉션할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용한다
React 특징
-
Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.
Augular와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, React는 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다. -
Component 구조
Component는 독립적인 단위의 소프트웨어 모듈을 뜻함.
React는 UI를 여러 컴포넌트를 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 기능 단위, UI 단위로 캡슐화 시켜 코드를 관리하기 떄문에 재사용성이 높다. -
Virtual DOM(Document Object Model)
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선할 수 있다.
웹 동작 방식
https://velog.io/@swch56/%EC%9B%B9-%EB%8F%99%EC%9E%91-%EB%B0%A9%EC%8B%9D
- Props & State
-
Props
Props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터.
자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다. -
State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
주로 동적인 데이터를 다룰 때 사용하며 사용자와의 인터렉션을 통해 데이터를 동적으로 변경할 때 사용한다.
Class 컴포넌트에서만 사용할 수 있고 각각의 state는 독립적이다.
- JSX
JSX는 javascript를 확장한 문법이다.React에서 JSX는 필수가 아니지만 개발자들끼리 합의후 맞춘는게 좋다 생각함.
React 생성
Node 설치
React를 사용하기 위해서는 Node.js를 설치해야한다.
React는 Node.js설치 시 같이 설치되는 npx 명령어를 사용하여 프로젝트를 만들기 때문에, 별도의 명령어로 추가 설치가 필요없다.
React 프로젝트 생성
npx create-react-app Blog
프로젝트가 생성되었다면 npm명령어를 사용하여 정상적으로 생성되었는지 확인
npm start
