React 스터디 1주차

React 란?

React는 facebook에서 제공해주는 프론트엔드, 라이브러리라고 볼 수 있다. 싱글페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 즉, 현재 많이 활용되고 있는 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있다.

 

React의 필요성

React를 사용하지 않아도 html, css, javascript 를 이용해서 웹페이지를 만들 수 있지만, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용된다.

 

React의 특징

• 선언적 (declarative)이다 : 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 랜더링을 수행할 수 있도록 한다.
• 컴포넌트 기반(component-based) 이다: 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.
• 한 번 배워서 어디에서나 사용하기 (Learn Once & Write Anywhere): 기존 소스를 불필요하게 다시 작성하지 않고 새 기능을 개발할 수 있다. Node 서버에서 랜더링을 할 수도 있고, 온라인 웹에서도 사용 가능하다. RN(React Native) 을 쓰면 모바일 앱도 만들 수 있다.

React의 장단점

장점

1. React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

2. controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, component 하나로 관리를 한다.

3. UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.

4. 다른 framework나 라이브러리와 병행해서 사용할 수 있다. 이는 개발이 이미 완료된 프로젝트에도 적절히 녹여낼 수 있는 확장성도 포함한다.

 

단점

1. IE8 이하 버전은 지원하지 않는다.

2. view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수 선행이다.

3. 데이터 모델링, 라우팅, ajax 등 기능 지원이 안된다.

 Babel 이란?

공식 사이트의 소개에는 "Babel is JavaScript compiler" 라고 나와있다. 즉, babel은 javascript로 결과물을 만들어주는 컴파일러이다. 

 

Babel 이 필요한 이유

cross-browsing을 돕기 위해 필요하다. 

(cross-browsing 이란? 🧐  -브라우저나 기기의 종류에 관계없이 사이트가 의도대로 보여지고 작동되게 하는 작업 (호환성). 브라우저마다 렌더링 엔진이 다르기 때문에 개발자의 의도대로 작동하지 않는 경우가 발생한다. 그래서 크로스 브라우징 작업이 추가로 필요하다.)

 

Babel이 빌드하는 과정

1. Parsing(파싱) : 코드 -> AST 변환 과정
2. Transforming(변환) : AST -> 원하는 형태로 변환 [Babel Plugin 설정 중요!]
3. Printing (출력) : 변환된 결과물 출력

* plugin: 문법 변환 규칙을 하나하나 세세하게 적용할 때 사용

* preset: 자주 쓰는 규칙들을 묶어 놓은 세트로, 한번에 적용할 때 사용

 

Webpack 이란?

webpack은 모던 javascript 애플리케이션을 위한 정적 모듈 번들러이다.

모듈 번들러란 웹 애플리케이션을 구성하는 자원(html, css, javascript) 을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

간단하게 표현하자면 웹팩이란 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러이다.

Webpack의 핵심 요소

• entry: 엔트리 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이다. 즉, entry로 묶고자 하는 파일의 첫번째 진입점을 설정해주면 된다.

• output: 웹팩을 실행하여 빌드하고 난 후 결과물의 파일 경로를 의미한다. filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하며 여러가지 옵션을 넣을 수 있으며, path 속성은 해당 파일의 경로를 의미한다.

• loader: 웹팩이 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 html, css, images, font 등을 변환할 수 있게 도와주는 속성이다. 웹팩은 모든 파일을 모듈로 취급하여 관리하는데 사실상 자바스크립트 파일만 알고 있어 로더를 이용해 다른 파일들을 웹팩이 이해하게끔 변경해줘야 한다.

• plugin: 웹팩의 기본적인 동작에 추가전인 기능을 제공하는 속성이다. 로더랑 역할을 비교해보자면 로더는 파일을 해석하고 변환하는 과정에 관여하며, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 볼 수 있다.

Webpack이 필요한 이유

1. 자바스크립트 변수 유효 범위 문제: ES6의 모듈 문법과 번들링으로 해결
2. 브라우저별 HTTP 요청 숫자의 제약: TCP 스펙에 따라 브라우저에서 한번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있다고 한다. 우리가 주로 사용하는 http/1.1 에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 예를들어 하나의 웹 사이트에서 사용하는 자바스크립트 파일이 10개라면 로드될때마다 10개를 모두 네트워크 요청을 통해 받아와야 하며 프로젝트 규모가 커질수록 병목현상을 야기시키는 요소 중 하나이다.
3. 사용하지 않는 코드의 관리
4. Dynamic Loading 및 Lazy Loading 미지원 문제: 이전에는 Require.js 같은 라이브러리를 사용하지 않는 이상 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했다. 웹팩에서는 Code Splitting 기능을 이용하는 원하는 모듈을 원하는 타이밍에 로딩할 수 있다.

JSX 란?

-JSX(JavaScript XML) 는 Javascript에 XML 을 추가한 확장한 문법이다. 

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

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

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

-자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

 

JSX 문법

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

//에러 케이스

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

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

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

// 정상코드 (3)
function App() {
	return (
		<>
			<div>Hello</div>
			<div>Yoojeong!</div>
		</>
	);
}

 2. 자바스크립트 표현식

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

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

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

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

// 방법(1) -외부에서 사용
function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>Yoojeong 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}

// 방법(2) - 내부에서 사용
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>Yoojeong 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}

// 방법(3) -AND연산자 (&&) 사용
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' && <div>Yoojeong 입니다.</div>}
			</div>
		</>
	);
}

// 방법(4) -즉시실행함수 사용
function App() {
	const loginYn = 'Y';
	return (
		<>
			{
			  (() => {
				if(loginYn === "Y"){
				  return (<div>Yoojeong 입니다.</div>);
				}else{
				  return (<div>비회원 입니다.</div>);
				}
			  })()
			}
		</>
	);
}

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

• JSX 스타일링 : JSX 에서 자바스크립트 문법을 쓰려면 {} 를 써야 하기 때문에 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다. 

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

 

• class 대신 className: 일반 HTML에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용한다.

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

props 란?

프로퍼티(property)의 약자이다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름을 갖는다.) 프로퍼티는 수정할 수 없다는 특징이 있다. (자식입장에서는 읽기 전용인 데이터이다.)

사용방법: 프로퍼티에 문자열을 전달할 때는 큰 따옴표("")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다.

 

// App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name="Yoojeong"/>
      <Footer />
    </div>
  );
}

export default App;

// Main.js

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

output>> 안녕하세요. Yoojeong 입니다.