리액트 기초 개념, React Intro

라용·2022년 8월 28일

위코드 - 스터디로그

목록 보기

15/100

위코드 파운데이션 과정을 들으며 정리한 내용입니다.

Why React

초기의 웹 사이트가 링크를 이용해 여러 페이지의 정보를 이동하며 보는 것이 전부였다면, 이제는 웹 안에서 문서를 작성하거나, 쇼핑을 하고 SNS 를 사용하게 되었습니다. 사용자가 별도의 응용 소프트웨어를 설치하지 않고 웹 브라우저를 통해 응용 소프트웨어의 기능을 응용할 수 있습니다. 그래서 현대의 웹사이트는 웹 애플리케이션이라고 부릅니다.

웹 애플리케이션의 규모가 커지면서 html, css, Vanila JavaScript 만으로 웹을 개발하는 것에 한계를 느끼게 되었고, JQuery 같이 Dom 조작을 쉽게 해주는 라이브러리를 사용하게 되었습니다. 하지만 JQuery 도 Dom 을 직접 조작하는 방식에서 벗어나진 못했습니다.

이런 상황에서 프론트엔드 개발을 더 쉽고 편하게 하기 위한 라이브러리, 프레임워크들이 등장했습니다. 대표적으로 React, Angular, Vue 등이 있습니다.

Framework Library
프레임워크와 라이브러리는 필요한 기능을 미리 만들어서 사용할 수 있는 형태로 제공. 프레임워크는 전체 틀을 제공하고 개발자는 그 안에서 작업, 라이브러리는 기능만을 도구처럼 제공, 개발자의 코드 안에 라이브러리를 삽입하는 형태

Angular 와 Vue 는 프레임워크, React 는 라이브러리 입니다. 앵귤러와 뷰는 자바스크립트 외에 각자 자기만의 문법을 가지지만, 리액트는 대부분 자바스크립트 문법을 그대로 사용합니다. 그래서 처음 자바스크립트를 배운 사람이라면 리액트를 배우면서 자바스크립트에 대한 이해도까지 같이 높이는 게 좋습니다.

무엇보다 리액트는 현재 가장 많이 사용되는 툴이라 다양한 문제에 대한 해결방법들이 많이 공유되고 있어 개발의 생산성을 높일 수 있습니다. 리액트는 UI 를 구축하는 기능만 담당하는 라이브러리이므로 유연하게 확장할 수 있고, 이후에 React Native 라는 기술로 모바일 어플리케이션 개발까지 할 수 있습니다.

Node

자바스크립트는 원래 브라우저에서 스크립트를 실행하기 위해 만들어진 언어입니다. 브라우저 이외의 실행환경이 필요 없었습니다. 그러다 웹 개발 시장이 커지고 웹 개발자가 많아지면서 브라우저가 아닌 환경에서 자바스크립트를 사용하고 싶은 니즈가 발생했고 브라우저 바깥에서 자바스크립트를 실행할 수 있는 환경인 Node.js 가 탄생하게 되었습니다. Node.js 는 Chrome V8 JavaScript 엔진으로 빌드된 자바스크립트 런타임(실행환경)입니다.

npm

npm 은 Node Pakage Manager 의 약자입니다. Node 로 실행할 수 있는 여러가지 패키지들을 관리하는 도구입니다. (패키지, 여러가지 기능을 작성한 자바스크립트 파일 묶음) npm 을 통해 사용할 패키지를 다운로드 받고, 업데이트 하고, 삭제할 수 있습니다. React 도 하나의 패키지 이므로 npm 를 이용해 다운로드 받아야 하고, 그 외에 개발환경 구축을 위한 여러 패키지 조합을 위해 Node 를 사용해야 합니다.

실습
Node.js 검색해서 다운로드, 최신 버전은 호환상 문제가 있을 수 있으니 안정적인 LTS 버전 다운로드, 설치 후 터미널에서 버전 확인. node --version npm --version 자바스크립트 언어를 쓰고 싶다면 node 입력하기. 밖으로 나올때는 ctrl + C 나 .exit 치고 엔터.

CRA

CRA(Create React App) 는 리액트로 웹 애플리케이션을 개발하기 위해 필요한 도구들을 모아놓은 툴체인(여러가지 도구를 연결) 입니다. 리액트는 UI 를 구축하기 위한 라이브러리이기 때문에 그 외에 기능 구현을 위해 다른 패키지가 필요합니다. 그때마다 패키지를 다운받고 호환성을 맞추고 환경을 설정하는 것은 번거롭기 때문에 필요한 도구들의 조합인 '툴체인'을 만들어 두었습니다. 툴체인의 종류는 여러가지인데, 리액트를 배우거나, SPA 를 구축한다면 CRA 라는 툴체인을 사용합니다.

실습
CRA 로 리액트 프로젝트 설치하기
터미널 상에서 작업할 폴더 위치로 이동한 다음 아래 명령어 실행
npx create-react-app 프로젝트이름
ㄴ 맥북의 경운 안되면 앞에 sudo 를 붙여서 실행
설치 완료되면, 생성된 폴더로 이동해서!! npm start 눌러서 기본 화면 구성 확인 가능
실행중인 로컬서버를 종료하기 위해서는
ctrl + C 키를 누른다.
생성된 프로젝트 파일 확인
node_modules - npm 으로 저장한 패키지들이 저장된 폴더, 깃으로 관리하진 않음.
public
src
.gitignore - 깃으로 관리되지 않는 파일들, 버전관리가 필요 없는 파일 들. 노드 모듈스의 패키지들은 너무 방대하므로 깃에 저장하지 않음
CRA 를 실행하면 기본적으로 git init 을 실행해줌. 깃에 저장되지 않는 패키지들은 클론할 때 다운이 안된다. 없으면 실행이 안된다. 그래서 pakage.json 파일이 있다.
pakaage-lock.json
package.json - 패키지에 대한 정보가 저장된 파일. dependencies 를 보면 우리 패키지가 의존하는 다른 패키지들을 확인할 수 있음. npm 으로 패키지를 설치하면 자동으로 추가됨. 이 정보들을 이용해 패키지들이 다운로드 됨. npm 은 이 패키지들을 한번에 설명하는 명령어를 제공한다. npm install 실행하면, 필요한 패키지를 모두 설치해 줌. 그럼 노드모듈스가 생성됨

CRA 으로 구축한 프로젝트는 SPA 라는 특징을 가지고 있습니다. SPA 는 Single Page Application 의 약자로 하나의 html 페이지 안에서 자바스크립트를 이용해 모든 처리를 다 하게 됩니다.

그 하나의 파일은 public 폴더 안의 index.html 파일입니다. 살펴 보면 초기 세팅 화면의 이미지와 텍스트는 이 html 에 작성되어 있지 않고, app.js 파일에 JSX 문법으로 작성되어 있습니다. 이를 컴포넌트라고 합니다. 현재 index.html 과 app.js 파일은 연결되지 않은 상태이지만 동작합니다. 그 역할은 index.js 파일이 합니다.

index.js 파일을 살펴보면,

// Import 구문은 다른 파일의 내용을 가져오는 것
import React from "react";
import ReactDom from "react-dom/client";
// 특정 상대 경로 표기 없음, node_modules 라는 패키지 폴더에서 가져오는 것
// node_modules/react 에서 가져온 것. 해당 패키지에서 export 해준다.
import "./index.css";
import App from "./App";
// ./ 로 상대 경로가 표기됨 . src/index.css, src/App.js 파일을 가져온다는 것
// App from ".App" 은 실제로 APP.js 파일에서 export 한 값을 가져올 수 있음

const root = ReactDom.createRoot(document.getElementById("root"));
// 돔에서 아이디가 root인 요소를 가져와 리액트 돔에 루트를 만들어 루트라는 변수에 할당
root.render(<App/>);
// 위에서 할당한 루투 변수에 render 메소드 실행해서 <App /> 이라는 컴포넌트를 렌더링 해주는 것

이렇게 index.js 를 통해서 index.html 과 js 가 연결해 실제 화면에 컴포넌트가 그러지게 됩니다. README.md 파일은 관련 설명을 담고 있습니다. 마크다운 문법으로 작성합니다.

React 정의와 특징

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 입니다. 선언적 컴포넌트 기반으로 쉽게 작업할 수 있습니다. 개발하는 하는 방식은 크게 두가지가 있습니다. 절차적과 선언적입니다. 절차적이란 말은 어떻게에 중점을 둡니다. 원하는 결과를 만들기 위해 절차를 프로그래밍합니다. 선언적은 무엇인지에 중점을 둡니다. 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍합니다. 절차적인 방식은 복잡하지만 선언적인 방식은 단순합니다. 단순하게 선언을 해도 실제 컴퓨터에게는 절차적인 명령을 전달하지만 개발자는 그 부분을 라이브러리에게 위임하고 선언적인 것에만 집중하면 됩니다. (생산성 향상)

Virtual DOM

바닐라 자바스크립트를 통해 직접 DOM 을 조작하는 방식이 절차적인 방식이라면, 리액트는 원하는 최종 결과의 모습만 만들어서 선언합니다. 이것이 리액트의 가장 큰 특징이며 리액트를 사용하는 이유입니다. 실제 브라우저에서 DOM 을 조작하게 되면, 브라우저는 DOM 을 계산하고, CSS 를 계산하고, 화면상에 DOM 이 그려질 위치를 계산하고 (Layout) 브라우저에 실제 픽셀을 그립니다.(Paint) 이렇게 매번 DOM 을 조작하면 브라우저가 처리해야 할 연산량이 늘어납니다. 그래서 리액트는 DOM 의 미니어쳐인 Virtual DOM 을 통해 필요한 DOM 조작을 계산한 뒤, 한번에 DOM 을 조작합니다. 브라우저가 처리해야 할 연산량을 줄이고 성능을 향상시킵니다.

컴포넌트

또 다른 리액트의 특징은 컴포넌트입니다. 프론트엔드에서 컴포넌트는 독립적이고 재사용 가능한 UI 단위를 말합니다. (유지 보수하기 편합니다.) 부모 컴포넌트를 수정하면 자식 컴포넌트 요소에 모두 적용되고, 컴포넌트를 사용하면 해당 UI 가 어떻게 구성되었는지 파악하기 쉽습니다. 리액트에서 컴포넌트를 선언하는 방식은 클래스 컴포넌트, 함수 컴포넌트 두가지 입니다. 현재 리액트 생태계에서는 함수 컴포넌트를 주로 사용합니다.

JSX

JSX (Javascript XML) 는 리액트에서 사용하는 자바스크립트 확장 문법입니다. 마크업과 로직을 한번에 작성할 수 있습니다. 자바스크립트 공식 문법은 아니라 브라우저에서는 해석할 수 없습니다. JSX 로 작성한 코드는 Bable(컴파일러, 번역기)을 통해 React.createElement() 함수로 변환되는데, 이렇게 직접 작성해도 되지만 코드가 길어지므로 JSX를 많이 사용합니다.

JSX 의 특징을 살펴보면, JSX 는 자바스크립트의 값입니다. 변수에 담을 수 있고, 함수의 인자로 전달하거나 함수의 리턴값으로 사용할 수 있습니다.

fucntion App() {
	const title = <h1>Hello World</h1>;
	return title;
}

자바스크립트의 값을 포함할 수 있습니다. {} 를 이용해 값을 감싸주면 됩니다. if 문 for 문 등은 값이 아니기 때문에 사용할 수 없습니다. 변수에 담을 수 있는 내용이 값입니다.

// 변수를 넣거나
fucntion App() {
	const name = "위코드";
	return <h1>Hello {name}</h1>;
}

// 실행한 함수의 리턴값을 담는
function App() {
	const addOne = (num) => {
		return num + 1;
	}
	return <h1>Hello {addOne(1)}</h1>;
}

JSX 에서 속성을 정의할 수 있습니다. 카멜케이스로 작성해야 합니다. (class -> className, tabindex -> tabIndex)

// 문자열로 클래스 이름을 넣어주거나
fucntion App() {
	const name = "위코드";
	return <h1 className="title">Hello {name}</h1>;
}

// 변수에 담아서 중괄호로 넣음
fucntion App() {
	const name = "위코드";
	const title = "title"
	return <h1 className={title}>Hello {name}</h1>;
}

JSX 에서 바로 이벤트리스너를 등록할 수 있습니다. html 에서 마크업하고 js 에서 이벤트리스너를 만드는 것이 아니라 마크업과 이벤트리스너를 동시에 작성합니다.

fucntion App() {
	const name = "위코드";
	const introduce = () => alert("Hello Wecode");
	return (
		<h1 onClick={introduce}>
			Hello {name};
		</h1>
	);
}

JSX 에서는 자바스크립트의 객체 형태로 인라인 속성을 부여합니다. 속성 명은 카멜케이스로 작성해야 합니다.

fucntion App() {
	const name = "위코드";
	const style = {
		color: "red",
		backgroundColor: "yellow",
	};
	return (
		<h1 style={style}>
			Hello {name};
		</h1>
	);
}

// JSX 에서 바로 속성을 부여하고 싶다면, 안에 객체를 담아주어야 합니다. 바깥 중괄호는 자바스크립트 값을 사용하는 것이고, 안은 자바스크립트의 오브젝트를 담는 것입니다.

fucntion App() {
	const name = "위코드";
	return (
		<h1 style={{
			color: "red",
		}}>
			Hello {name};
		</h1>
	);
}

JSX 클로징도 주의해야 합니다. 닫는 태그가 없다면 정상적으로 동작하지 않습니다.

<img></img>
// 내용이 없다면 아래처럼 셀프 클로징 가능
<img/>

모든 태그는 하나의 부모태그로 감싸져 있어야 합니다. 감싸지 않으면 동작하지 않습니다.

// 에러
<h1>wecode</h1>
<p>study</p>

// 동작
<div>
	<h1>wecode</h1>
	<p>study</p>
</div>

문법만을 위해 필요없는 div 태그를 추가하는 것은 비효율적인 동작입니다. 그래서 리액트는 실제 돔에는 추가하지 않으면서 그룹화에만 사용할 수 있는 React.Fragment 라는 tag를 제공합니다. 이 태그는 리액트 패키지를 임포트 해주고 import React from "react"; 아래처럼 작성하면 됩니다.

<React.Fragment>
	<h1>wecode</h1>
	<p>study</p>
</React.Fragment>

// 단축 표현법으로 아래처럼 작성합니다.

<>
	<h1>wecode</h1>
	<p>study</p>
</>

그 외에 체크해야 할 문법으로
href = "#" 은 href = "#!" 으로 해야 합니다.

실습

// src 폴더에 새로운 파일 만들기
MyComponent.js

// 해당 파일 들어와서 리액트 패키지연결하기
import React from "react"

// 함수 컴포넌트로 만들어본다.
fucntion MyComponent() {
	return <h1>Wecode StudyLog</h1>;
}

// 아직 브라우저에 렌더링 되지 않은 상태
// index.js 파일에서 우리 파일을 index.html 에 연결해 주어야 함
// 우선 우리 파일을 가져다 쓸 수 있게 export 해주어야 함
export default MyComponent;

// import 해서 사용할 준비가 완료되면
// index.js 파일로 이동해서 import 해주기
import MyComponent from "./MyComponent"
// 상대경로 작성, js 파일은 뒤에 확장자 안 붙여도 됨

// 렌더링 하기 위해 root.render 메소드 안에 내가 만든 컴포넌트 넣기
root.render(<MyComponent />);
// 첫글자가 소문자면 태그로 인식하니 주의

// 이제 css 적용하기, css 파일을 Import 해주어야 함
// 우선 MyComponent.css 파일 만들어서 작성하고

h1 {
	color: red;
}

// MyComponents.js 파일에 가서 css 파일을 Import 함
// 바로 경로를 작성해주면 됨
import "./MyComponent.css";

// 기본으로 세팅된 스타일 태그 적용은 주석처리한다.
import "./index.css";

라용

Today I Learned

이전 포스트

웹 서비스의 역사와 발전

다음 포스트