😶 What's React?

• React는 사용자 인터페이스 (UI)를 만들기 위한 JavaScript 라이브러리이다.

• 즉, 사용자에게 보여지는 인터페이스를 만들고, 그 위에서 사용자가 클릭을 하는 등의 다양한 이벤트가 발생하면, 그 이벤트에 맞게 반응하도록 만들어진 라이브러리 !

  • 웹 UI를 만드는 라이브러리
  • 컴포넌트 단위로 이루어진 UI 라이브러리

주요 특징 3가지

🔴 1. JSX

• JSX는 자바스크립트 코드에서 HTML처럼 쓸 수 있도록 도와주는 문법, JavaScript를 확장한 문법
• 유사 JavaScript일 뿐, JavaScript가 아니다 !!

JSX 예시 :

import React from 'react';

function App() {
	return <h1 className="greeting">Hello!</h1>;
}

export default App;

💥 JSX 문법 원칙

1. 감싸인 요소
   • 컴포넌트에 여러 요소가 있다면, 부모 요소 하나로 꼭 감싸야 한다.

import React from 'react';

function App() {
	return (
		<> {/* fragment tag */}
			<h1>Hello, React!</h1>
			<p>React is...</p>
		</>
	);
}

<></> : fragment tag

2. class 대신 className
   • JSX에서는 class 대신 className으로 작성

function App() {
	const text = 'React is...';

	return (
		<>
			<h1 className="title">Hello, React!</h1>
			<p>{text}</p>
		</>
	);
}

3. 꼭 태그를 닫아야 함!
   • HTML에서 input, br 태그는 닫지 않아도 되지만, JSX에서는 닫지 않으면 오류 발생!

<input type='text' name='name' />
<br />

4. { /**/ }로 주석 사용

{ /* 주석은 이렇게 사용 */ }

🟠 2. Components

• 리액트는 컴포넌트 기반 라이브러리이다.
• 컴포넌트란 ?
  • 한 가지 기능을 수행하는 UI의 단위, 기능의 최소 단위
• 컴포넌트는 서로 독립적이고 잘 고립되어 있으며, 여러 부분을 분할 해서 사용하므로 재사용이 가능

🟡 3. Virtual DOM

• DOM?
  • Document Object Model, 문서 객체 모델
  • HTML 단위 하나하나를 객체로 생각한 모델
• DOM의 구조는 트리 구조로 되어 있다.
• 만약 어떤 DOM의 요소를 하나 수정하는 함수를 만들고 실행시킬 때, 모든게 다시 실행
• 즉, 수정할 때마다 불필요한 연산이 매번 일어난다.
  
  
• 이러한 문제를 해결하기 위해서 가상 DOM이 등장
• 가상 DOM은 실제 DOM의 사본이라고 생각할 수 있음
• 가상 DOM은 변화를 가상 DOM에서 미리 인지해 변화시킨다.
• 실제 DOM이 아니기 때문에 렌더링도 되지 않고 연산 비용이 비교적 적다. 마지막에 실제 DOM에게 던져주어, 모든 변화를 한번에 렌더링한다.
• 가상 DOM은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시킨다!
  

WHY React?

1. 생산성/재사용성
   1. Component와 Hook 활용
2. 풍부한 자료/라이브러리
   1. 전 세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있다.
3. 다양한 사용처
   1. 웹 어플리케이션뿐만 아니라 React-Native에 적용하여 안드로이드, IOS 어플리케이션 개발 가능

References

berkbach.com : 기초부터 배우는 React — Part 1