1. React 시작하기(2) - React의 주요 특징

1. React 시작하기(2) 리액트의 주요 특징

 

 

1. 리액트란?

- 자바스크립트 라이브러리

- SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용됨

- 웹 모바일 앱 등의 view layer를 처리하는데 사용 됨

- 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 어플리케이션의 퍼포먼스를 최적화한 라이브러리

SPA(Single Page Application)란?

기존 웹 서비스 - 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링 하는 방식

SPA - 최초에 한번 페이지를 전체를 로드하고, 특정 부분만 Ajax를 통해 데이터를 바인딩 하는 방식

위의 이미지 처럼 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념

SPA 구현을 쉽게 말하면 jsp 파일 없이 index.html 파일 하나에서 js, css 등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩 하는 개념.

 

대표적으로

React, Vue, Angluar가 있음

 

 

 출처 : https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/

[WEB] SPA 란?

 

DOM이란?

- Document Object Model, 즉 문서 객체 모델
- 트리 구조로 되어 있으며 바닐라 JS가 querySelector()등으로 각 element에 접근할 수 있도록 하는 객체 모델

- 트리 구조로 되어있어 이해하기는 쉽다.

 

Real DOM의 장단점

- 트리가 거대해지면 속도 이슈 발생

- 잦은 DOM 업데이트는 오류와 UI에 악영향을 미침

1. 변경점을 적용한 문서를 계속 리렌더링 해줘야하는데 트리가 거대하다면 그만큼 리소스 소모

2. 예시 : 광고창 하나가 바뀌었다 해도 전체 페이지를 계속 갱신해야 함

 

Virtual DOM이란?

- 주로 SPA(하나의 큰 HTML을 Real DOM으로 가지고 있는)에서 적용되는 개념

- 하나의 큰 HTML을 Real DOM으로 칭하고 해당 DOM을 컴포넌트 단위로 쪼개서 추상화한 개념

- Real DOM에서 직접 처리하는게 아니라 Virtual DOM이 버퍼 역할을 해줌으로써 어떤 부분이 바뀔지 미리 계산, 수정 후에 해당 수정된 부분만 업데이트 해주기 위한 기술

 

Virtual DOM과 Real DOM의 차이점

Real DOM은 element의 자식노드가 추가되면 전체문서가 갱신되지만

Virtual DOM은 버퍼 역할을 해줌으로서 Real DOM을 추상화한 DOM과 비교하여

변경점만 Real DOM에 적용하여  전체 문서가 갱신되지않는다.

 

문법적인 차이도 조금있는데 어떠한 element를 찾을 때

document 즉 HTML 문서의 querySelector등으로 메소드로 찾는데

Virtual DOM을 사용하는 React의 경우는 ref로 element를 찾는다.

 

출처 : https://velog.io/@somfist/Virtual-dom%EA%B3%BC-Real-dom%EC%9D%98-%EC%B0%A8%EC%9D%B4

Virtual dom과 Real dom의 차이

 

2. 리액트의 특징

리액트는 컴포넌트 기반의 라이브러리이다.

1. 컴포넌트(Component)

- 화면을 이루는 작은 요소

- 여러 화면에 사용 될 수 있음. 재사용성을 가짐

- 종류

1) 클래스형 : 프로퍼티, state와 함수 등을 포함

2) 함수형 : state를 포함하지 않으며, 데이터를 받아 출력할 컴포넌트를 반환

>>>>> 하기 1~5번을 각각 컴포넌트로 볼 수 있음

이미지 출처) https://ko.reactjs.org/docs/thinking-in-react.html

 

2. Props and State

- 단방향 데이터 흐름(one-way data flow)(or 단방향 바인딩(one-way binding))

리액트의 데이터 흐름은 단방향

위에서 아래, 부모에서 자식, 한 방향으로만 흐름.

거꾸로 부모의 데이터를 바꿔주기 위해서 state를 이용해야 한다.

 

1) Props

- 프로퍼티(properties)의 줄임말

- 부모요소에서 설정. 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터.

- 읽기 전용. 자식 컴포넌트에서 전달받은 props를 변경이 불가능. props를 전달해준 최상위 부모 컴포넌트만 변경 가능.

 

2) State

- 컴포넌트의 상태. 변할 수 있음. 동적인 데이터를 다룰 때 사용.

  (리스트에서 선택된 값, 체크 박스에서 체크된 값 등)

- 클래스형 컴포넌트에서만 사용 가능

- state는 독립적이기 때문에 다른 컴포넌트의 직접적인 접근이 불가능 하지만,

  상위 state는 state를 변경해주는 함수를 props로 받을 경우 state의 변경이 가능

 

3. 가상 돔(Virtual DOM)

- DOM 업데이트를 추상화 시켜 놓은 것.

- 브라우저에서 html을 열게되면 DOM을 만들게 됨. html 코드의 특정 부분이 변경되면 전체 DOM을 새롭게 만들게 되어 매우 비효율적

- 이를 개선하기 위해 React는 가상 DOM을 만들어 진짜 DOM과 비교함. 변경된 부분만 진짜 DOM에 반영하는 방식으로 작업 수행

- in-memory에 존재해서 실제 렌더되지 않음

- Vue, React에서 사용

 

전체 UI는 다시 그려도 React DOM은 변경된 텍스트 노드만 업데이트 하는 예시

이미지출처) https://ko.reactjs.org/docs/rendering-elements.html

 

4. JSX

- JSX(JavaScript XML)

- JavaScript에 XML을 추가한 확장 문법. React에서 element를 제공해 줌

- Example

function App() {
return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

1. JSX란?

- JSX(JavaScript XML)

- JavaScript에 XML을 추가한 확장 문법.

- 리액트로 프로젝트를 개발할 때 사용되므로, 공식적인 자바스크립트 문법은 아님

- 브라우저에서 실행하기 전, 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨

ex)

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "Hello, GodDaeHee!");
}

 - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.

 

2. JSX 문법

 

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

 - Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

ex) 에러 케이스

// Fail to compile
// parsing error : adjacent JSX elements be wrapped in an enclosing tag
// Did you want a JSX fragment <>...</>?
function App() {
	return (
		<div>Hello</div>
		<div>GodDaeHee!</div>
	);
}

ex) 정상 코드1 (<div></div>)

// div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</div>
	);
}

 

ex) 정상 코드2 (<Fragment></Fragment>)

// <Fragment>를 사용가능 하지만 <div>태그보다 무거운 편이다.
function App() {
	return (
		<Fragment>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</Fragment>
	);
}

 

ex) 정상 코드3 (<></>)

function App() {
	return (
		<>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</>
	);
}

 

2. 자바스크립트 표현식

 - JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
 - 유효한 모든 JavaScript 표현식을 넣을 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%ED%91%9C%ED%98%84(%EC%8B%9D) 

 

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

 

3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용

 - if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
 - 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.

 

ex) 방법1 외부에서 사용

function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>GodDaeHee 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}

 

ex) 방법2 내부에서 사용

function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>GodDaeHee 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}

 

ex) 방법3 AND연산자(&&) 사용

// 조건이 만족하지 않을 경우 아무것도 노출되지 않는다.
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' && <div>GodDaeHee 입니다.</div>}
			</div>
		</>
	);
}

 

ex) 방법4 즉시실행함수 사용

function App() {
	const loginYn = 'Y';
	return (
		<>
			{
			  (() => {
				if(loginYn === "Y"){
				  return (<div>GodDaeHee 입니다.</div>);
				}else{
				  return (<div>비회원 입니다.</div>);
				}
			  })()
			}
		</>
	);
}

 

4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다.

1) JSX 스타일링
 - JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
 - 카멜 표기법으로 작성해야 한다. (font-size => fontSize)

ex) css style 

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello, GodDaeHee!</div>
	);
}

 

2) class 대신 className
 - 일반 HTML에서 CSS 클래스를 사용할 때에는 class 라는 속성을 사용한다.
 - JSX에서는 class가 아닌 className 을 사용한다.

ex) className

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div className="testClass">Hello, GodDaeHee!</div>
	);
}

 

5. JSX 내에서 주석 사용 방법

 - JSX 내에서 {/*…*/} 와 같은 형식을 사용 한다.

ex)

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div>Hello, GodDaeHee!</div>
		</>
	);
}

 

 - 시작태그를 여러줄 작성시에는, 내부에서 // 의 형식을 사용할 수 있다.

function App() {
	return (
		<>
			<div
			// 주석사용방법
			>Hello, GodDaeHee!</div>
		</>
	);
}

 

 - 개발자가 JSX를 작성하기만 하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석하여 준다.
이를 '선언형 화면' 기술이라고 한다. 앞으로 사용할 react의 기본문법이니 숙지하고 가도록 하자.

 

출처 : https://goddaehee.tistory.com/296

[React] 2. JSX란? (정의, 장점, 문법)

 

5. 뷰 담당역할 라이브러리

- React는 프레임워크가 아닌 라이브러리

- 뷰만을 신경쓰는 라이브러리

- 기타 기능은 직접 구현하여 사용해야함

- Routing > React Router

- Ajax 처리 > axios or fetch

- 상태 관리 > Redux or MobX 등...

 

 

출처 : https://goddaehee.tistory.com/295

[React] 1. React 시작하기(2) - React의 주요 특징