React 간단 정리

 

📌 React란?

 

React는 페이스북에서 개발한 JS 오픈소스 라이브러리입니다.

React는 Virtual DOM이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링 합니다.

 

Virtual DOM은 가상으로 존재하는 DOM입니다.

React는 이벤트가 발생할 때마다 Virtual DOM를 만들어서 렌더링마다 실제 DOM과 비교해서 변경이 필요한 최소한의 변경사항만 찾아서 실제 DOM에 반영해 줍니다.

이로 인해, 앱이 효율적으로 동작해서 속도 개선에 많은 도움이 된다고 합니다.

Vanilla Javascript로 가상돔(VirtualDOM) 만들기

이 링크에서는 Virtual DOM에 대한 개념뿐만 아니라 직접 JS로 구현하는 것까지 볼 수 있습니다..!

 

리액트의 3가지 특징

• 선언형
  • 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다.
• 컴포넌트 기반
  • 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다.
  • 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있습니다.
• 범용성
  • 라이브러리이기 때문에 어디에든 유연하게 적용될 수 있습니다.
  • 리액트 네이티브를 이용하면 모바일 개발도 가능합니다.

 

---

📌 JSX

 

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다.

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다.

 

하지만 JSX는 브라우저가 바로 실행할 수 있는 코드가 아니라서 Babel 이란 것을 이용하여 변환을 해줄 수 있습니다.

Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.

 

JSX를 사용하면 JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 됩니다.

 

// JSX X
return React.createElement {
	"h1", null, `Hello, ${formatName(user}!`
}
// JSX O
return <h1>Hello, formatName(user}!</h1>;

JSX가 없이도 React 요소를 만들 수 있습니다.

하지만 JSX를 사용한 코드에 비해 가독성이 떨어지고 불편하기 때문에 사용하는게 훨씬 좋습니다.

 

문법

 

하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 합니다.

<div>
	<div>
		<h1>Hello</h1>
	</div>
	<div>
		<h2>World</h2>
	</div>
</div>

 

 

클래스 엘리먼트를 사용해야 한다면 className으로 표기해야 합니다.

<div className='name'>{name}</div>

class로 작성하게 된다면 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 합니다.

 

 

JavaScript 표현식을 사용해야 한다면 중괄호 { }를 이용합니다.

function App() {
	const name = 'Kim';
	return <div>Hello, {name}</div>
}

 

 

사용자 정의 컴포넌트는 대문자로 시작해야 합니다.

function Hi() {
	return <div>Hi</div>;
}

// X
function hi() {
	return <div>Hi</div>;
}

 

 

조건부 렌더링에는 삼항연산자를 사용해야 합니다.

또한 태그 내에서 JS 문법을 사용해야 한다면 중괄호 { }로 묶고 사용해야 합니다.

<div>
	{
		(1+1 === 2) ? (<p>정답</p>) : (<p>오답</p>)
	}
</div>

 

---

📌 컴포넌트

 

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말합니다.

하나의 기능 구현을 위한 여러 종류의 코드 묶음이라고도 하고 UI를 구성하는 필수 요소라고도 합니다.

 

React는 컴포넌트 단위로 개발을 하여 의존성이 낮고 재사용성과 범용성이 높은 코드를 지향합니다.

 

컴포넌트 트리

모든 리액트 앱은 최소한 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 내부적으로 근원(root)이 되는 역할을 합니다.

이 root 컴포넌트는 근원이므로 다른 자식 컴포넌트를 가질 수 있고, 그림에서 볼 수 있듯이 트리 구조로 형상화할 수 있습니다.