2월25일(토) 본격적인 React학습!(React에서 부터 개발환경 세팅, CRA, 컴포넌트까지 )

Mindfulness·2023년 2월 26일
CRAReactcomponents개발환경 세팅컴포넌트
post-thumbnail

본격적으로 React학습을 시작해보았다. 생각한것보다 아직까지는 개념들이 많이 어렵지 않았고 낯설지 않아 공부하는데 즐거웠다. 또한 간만에 어려움없이 수업을 따라가니 React하는 게 재미있었다. 이번부터 다음 주 초까지는 매일 강의를 들으며 공부했던 것들을 정리하고 요약해보려고 한다.

오늘은 기본 React에 관한 부분부터 React에서 자주 사용되는 ES6문법, 개발환경 세팅, CRA, React Component까지 공부 한 내용을 정리해 보도록 하겠다.

1.React 소개

공식 문서에는 React를 이렇게 소개하고 있다.
A JavaScript library for building user interfaces
‘React’ 라는 것을 통해서 UI를 Building할 수 있다.

그렇다면 UI를 Building한다는 말은 무엇일까?
: 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분을 구축한다는 의미라고 보면 된다.

React의 큰 특징 중 하나인 SPA 즉, (Single Page Application)와 그 반대 개념인 MPA, Multi-Page Application에 대해서 먼저 한 번 살펴보자.

우선 SPA는 하나의 페이지 내에서 모든 컨텐츠를 동적으로 로드하는 웹 애플리케이션이다.

SPA의 특징과 장점으로는

  1. 딱 한개의 페이지(Single Page)로 구성된 웹 앱.
  2. 서버에 1회 리소스를 요청한다.
  3. 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정한다.
  4. 사용자 입장에선 깜빡임?이 혹은 페이지 이동이 필요 없다. 그렇기에 굉장히 자연스러운 UX(User Experience)를 구현할 수 있다.
  5. 비슷한 기술들 → Angular, Vue(구현의 차이는 각각 존재해요)

다시 말해, 초기에는 모든 컨텐츠를 한 번에 다운로드하지 않기 때문에 페이지 로딩 속도가 빠르고, 페이지 이동이 필요 없기 때문에 사용자 경험이 좋다. 또한, 웹 애플리케이션에서 발생하는 데이터 변경 사항을 서버로부터 가져와 렌더링하므로, 서버와의 통신이 줄어들어 전체적인 성능이 향상된다. 그리고 SPA는 대부분의 프론트엔드 프레임워크에서 사용되는 기술이다.
하지만 검색 엔진 최적화(SEO, Search Engine Organization) 측면에서는 MPA보다 많이 떨어진다. HTML 페이지 전체가 필요한데 SPA의 HTML은 검색엔진이 찾을 수가 없기 때문이다.

추가로 MPA의 특징을 살펴보자.

MPA는 각 페이지마다 새로운 요청을 보내야 하기 때문에 초기 로딩 속도는 느릴 수 있다. 또한, 사용자 경험 측면에서 페이지 이동이 필요하기 때문에 SPA보다 불편할 수 있다. 그렇지만 위에서 얘기한 SEO측면에서는 SPA보다 우수하다.

그렇다면 SPA 프레임워크는 VueJS도 있고 AngularJS도 있는데 왜 하필 React일까?
SPA 프레임워크의 종류를 우선 보면
1. ReactJS
1. 페이스북이 만들고 유지보수한다.
2. 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있다.
2. VueJS
1. 배우기 쉽고 간편하다.
2. 꾸준히 성장하는 중.
3. 후발주자라 market share가 작다.
3. AngularJS
1. 안정적인 프레임워크를 가지고 있다.
2. 무겁고 배우기가 어렵다. 그래서 나온 지 꽤 됐음에도 점유율은 셋중 가장 낮다.

(NPM trends에서의 점유율 그래프)

그렇다면 React를 선택하는 이유들은,
1. 점유율
2. RN(React Native)와의 상생, 심지어는 VR에서까지 활용할 수 있다.
3. 막강한 커뮤니티
4. 채용공고가… 제일 많다..

마지막으로 React에서 가장 중요하다는 개념 중 하나인 컴포넌트(component)에 대해서 살짝 알아보자.
리액트가 채택한 개발방법인데 component는 UI를 구성하는 독립적인 블록이다. 즉, 컴포넌트는 재사용 가능한 UI 요소다. 쉽게 말하면 벽돌 이라고 말할 수도 있을 것 같다. 벽돌을 쌓아 집을 짓듯이 아래와 같이 헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트를 쌓아 올리듯 개발을 한다.

2.React 에서 자주 사용되는 필수 ES6 문법

이 부분은 저번 TIL에서도 다뤘기에 간단히하고 넘어가겠다.

  1. 상수와 변수 - var을 원래 사용하였지만 ES6후로는 const(상수)와 let(변수)를 이용한다.
    (const : 재할당 안 됌. 내부 속성값은 수정 가능.
    let : 재할당 가능.
    둘 다 block level scope를 가진다.)

  2. Object 선언, 단축 속성, 객체 복사
    object는 key와 value가 한 쌍이다.
    object선언은 아래와 같이 한다.

const person = {
	name: ‘민수’,
	age: 28,
	company: ‘francais company’,
	doSomething: () => {},
}

여기서 key - value가 일치하면 생략할 수 있다.

그리고 객체를 복사할 때는 얕은 복사와 깊은 복사가 있는데 주의해서 사용하여야 의도치 않은 변경 막는다.

  1. Template Literals
// 일반 텍스트
`string text`
// 멀티라인
`string text line 1
 string text line 2`
// 플레이스 홀더를 이용한 표현식
`string text ${expression} string text`

  1. 배열/객체 비구조화 (Array/Object Destructuring)
    즉, 구조분해 할당. 객체의 구조분해 할당과 배열의 구조분해 할당이 있다.

  2. 전개 연산자 (Spread Operator)
    전개 연산자는 (…)을 이용해서 사용. React에서 많이 사용 할 아이다.

  3. Arrow Functions (삼항연산자)

const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y};
const mysum3 = (x, y) => ({x: x, y: y}); const mysum4 = (x, y) => {
  return {x: x, y: y};
}
const mysum5 = function(x, y) {
  return {x: x, y: y};
};
function mysum6(x, y) {
  return {x: x, y: y};

}

3.개발환경 세팅

필수 프로그램 설치

  1. 크롬 브라우저(우리가 만드는 웹은 브라우저에서 구동된다.)
  2. VScode(코드를 작성하기 위한 프로그램)
  3. git(우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해)
  4. node (우리가 작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행된다. Node가 설치되어 있지 않으면 자바스크립트 코드를 실행할 수 없다.)
  5. yarn
    (5)-1 터미널에서 yarn 설치하기 : ‘npm install -g yarn’ 입력
    (5)-2 yarn 설치 확인하기 (=== 버전 확인하기) : ‘yarn -v’
    (5)-3 yarn으로 패키지 설치하는 방법 : ‘yarn add [설치할 패키지 이름]’

npm이란?

NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소이다. npm에서 여러 패키지를 다운받아 활용할 수 있다. 비슷한 친구로는 yarn이 있다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저”이다.

npm과 yarn의 공통적 특징으로는 둘다 자바스크립트 런타임 환경인 노트(Node.js)의 패키지 관리자이다. 또한 애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓는데, 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자이다.

그렇다면 둘 중 무엇을 선택할 것인가? 차별적 특징을 살펴보자.
1. NPM
1. node.js를 설치할 때 자동으로 생성
2. Node Package Manager의 약자
3. NPM platform 자체
2. YARN
1. 2016년에 페이스북에서 개발한 패키지 관리자
2. npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다.
3. 요약
1. 속도 : Yarn wins
2. 보안 : Yarn wins(하지만 최근 npm의 보안 업데이트도 크게 향상됐다.)

그렇담 yarn을 사용하도록 해보자.

(명령어)

[출처 : Cracking Vue.js]

*javascript 런타임 환경의 종류

런타임이란?
프로그래밍 언어가 구동(running)되는 환경(environment).
자바스크립트의 대표적 런타임 환경은 2가지.

  1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer)
  2. node환경
    즉, javascript 파일을 실행할 수 있는 방법은 2가지.

4. CRA(Create React App)

CRA란?

Create React App : Set up a modern web app by running one command.

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다. (React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많다. WebPack, babel, eslint 등. 그런데 이러한 것들을 신경쓰지 않아도 알아서 다 되도록 한다. → ‘보일러플레이트’라고 할 수 있다.)
예를 들면 완제품을 구매한다(= CRA) vs 모든 재료와 도구를 구매하여 하나씩 조립, 제작하여 만든다(= react, react-dom, babel, webpack 등 모든 세팅을 혼자)

*상대경로 import → 절대경로 지정하기

  1. jsconfig.json 파일을 만들기 (반드시 root 경로에)

  2. CRA(Create React App)

    CRA란?
    Create React App : Set up a modern web app by running one command.

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다. (React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많다. WebPack, babel, eslint 등. 그런데 이러한 것들을 신경쓰지 않아도 알아서 다 되도록 한다. → ‘보일러플레이트’라고 할 수 있다.)
예를 들면 완제품을 구매한다(= CRA) vs 모든 재료와 도구를 구매하여 하나씩 조립, 제작하여 만든다(= react, react-dom, babel, webpack 등 모든 세팅을 혼자)

*상대경로 import → 절대경로 지정하기
1. jsconfig.json 파일을 만들기 (반드시 root 경로에)

2. 다음 내용을 작성.

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

5. React Component란?

React Component는 React 라이브러리에서 UI를 구성하는 기본 단위이다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

React Component는 자바스크립트 함수 또는 클래스로 작성될 수 있다.

함수형 컴포넌트는 React 16 이전 버전에서 주로 사용되었으며, 간단하고 재사용 가능한 UI 조각을 만드는 데 유용하다. 함수형 컴포넌트는 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시 되는지를 기술하는 React 엘리먼트를 반환한다.

클래스형 컴포넌트는 React 16 이후에 도입되었으며, 상태(state) 및 라이프사이클 메서드를 사용할 수 있다. 클래스형 컴포넌트는 상태를 저장하고 상태가 변경되면 UI를 업데이트한다.

<리액트 컴포넌트를 표현하는 두 가지 방법>

1)함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

2)클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장.

결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수 이다. 누군가 와서 “컴포넌트를 만들어 보세요" 라고 한다면 우리는 html을 return 하는 함수를 만들면 된다!

<Component 보는 방법>

컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다.

컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.

또한 컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있다. 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성한다.

그리고 return을 기준으로 아랫부분에서는 HTML(정확히는 JSX) 을 작성할 수 있다. 여기에 작성한 html 코드와 값들이 화면에 보여진다.

주의할 점은 컴포넌트를 만들 때 가장 첫 글자는 반드시 대문자로. 폴더는 소문자로 시작하는 camelCase로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 PascalCase로 이름을 짓습니다.

<부모-자식 컴포넌트>

컴포넌트 안에 컴포넌트 넣기
컴포넌트는 다른 컴포넌트를 품을 수 있다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다.

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

(코드해설)
App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들었다. 그리고 Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그를 쓰듯이 넣었다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있다.

이렇게 코드를 작성하면, 화면에는 “나는 자식입니다” 라는 문장이 보여지게 된다. 왜냐하면 이 파일에서 내보내진 ( export default 라고 한다.) 컴포넌트는 App 컴포넌트 이기때문에 App 컴포넌트가 화면에 보여진다. 하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있다. 그래서 결국 자식 컴포넌트에 있는 “나는 자식입니다" 라는 문장이 보여지게 되는 것.

이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다. “화면에 보여지게 하다”는 Rendering 이라고 할 수 있겠다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 한다.

다음번에는 JSX와 Props, State에 대해서 공부해보고 정리해보도록 하겠다!!

profile
Mindfulness
Junior Frontend Developer
이전 포스트

2월24일(금) React 시작! (그 전에 HTML, ES6 얕은복사 깊은복사)

다음 포스트

2월26일(일) 부트캠프 3주차 WIL

0개의 댓글