React가 뭔가요?
SPA(Single Page Application)
최초에 서버로부터 html을 전달 받고 페이지의 변경이 필요할 때 변경이 필요한 부분을 json으로 전달 받는다.
이때 페이지에서 변경된 부분만 계산하여 다시 그리게 된다.
React
사용자 인터페이스를 만들기 위한 javascript 라이브러리
Component
리액트에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현
virtual DOM
가상적인 표현을 메모리에 저장하고 reactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
JSX
javascript 내에서 ui를 작성하기 위해 개발자에게 익숙한 환경을 제공, html과 유사함
리액트를 쓰는 이유
생산성 / 재사용성
풍부한 자료 / 라이브러리
다양한 사용처
리액트 특정 분석하기
State
컴포넌트 내에서 state를 이용하여 데이터를 유동적으로 관리한다
state가 변경될때마다 컴포넌트가 다시 렌더링 된다.
CRA란
- react 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트
- 프로젝트 생성에 필요한 다양한 기능을 command로 제공함
장점 1. 개발자가 온전히 리액트 앱 개발에 집중할 수 있도록 함
상대적으로 덜 중요한 코드는 노출되지 ㅇ낳음
강력한 command지원
2. 대부분의 모든 브라우저에서 해석될 수 있또록 transcompile 지원
JSX란
- JSX는 함ㅁ수 호출과 객체 생성을 위한 문법적 편의를 제공하는 javascript의 확장
- html과 비슷하게 생겼으나 javascript이고 html과 다른 부분이 있음
const App = () => {
return (
<div>
<p>안녕<p>
<MyComponent>반가워</MyComponent>
</div>
);
}JSX의 장점
- 개발자 편의성 향상
- 협업에 용이 / 생산성 향상
- 문법 오류와 코드량 감소
JSX 특징 / HTML과 차이점
- HTML 태그 내에 javascript 연산
- class -> className
- 스타일은 object로
- 닫는 태그 필수
- 최상단 element는 반드시 하나
Component란
- React에서 페이지를 구성하는 최소단위
- Component의 이름은 대문자로 시작
- Class Component / Function Component로 나뉨
- Controlled Component / Uncontrolled Component
Component의 특징
- 컴포넌트끼리 데이터를 주고 받을 땐 Props
- 컴포넌트 내에서 데이터를 관리할 땐 State
- 데이터는 부모 -> 자식으로만 전달
React를 사용하는 이유들을 정리하면 사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다라고 말할 수 있다.
React의 장점
- React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높입니다. Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다.
- React 컴포넌트의 재사용은 개발 시간을 크게 절약합니다.
- 단방향 데이터 흐름을 통해 안정적인 코드를 제공합니다. 단방향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미합니다.
- 오픈 소스이며 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개됩니다.
- Hooks를 이용해 컴포넌트의 상태를 쉽게 관리할 수 있습니다.
- 여러 개발 도구를 지원합니다. 예를 들어 크롬에서는 React Developer Tools라는 확장 프로그램을 제공합니다
React는 앱 작성 방식을 정의하는 라이브러리입니다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 ui 변경 방법에 대해 명확한 규칙을 설정하여 수행한다. 반면 자바스크립트는 규칙을 설정하지 않은 스크립트 언어라고 할 수 있다. 따라서 이러한 라이브러리 없이 작성된 앱은 더 자유로울 수 있지만, 정해진 것이 없기 때문에 코드를 작성하다가 길을 잃어버리기 쉽다.
