2022/02/25 TIL

🖇wecode Pre-course 2주차 수업을 인용하여 작성했습니다. 

오늘은 본격적으로 React를 배우기 전 예습한 내용들을 간단한 개념정리를 해둘까 한다. 

 

1. Why React ? 

 

새로운 기술에 대해 학습할 때, 항상 이 기술이 왜 사용되는지 어떤 철학을 가지고 무슨 문제를 해결하기 위해 만들어졌는지를 이해하는 것이 중요하다고 한다. 

 

그렇다면 왜 React가 생겼을까 ?

웹은 초기를 거쳐 3세대 웹까지 발전하게 되었다. 기술이 발전하는 이유는 그 시대에서 필요한 요구조건들와 해결해야 되는 문제들이 점차 복잡해지기 때문이다. 웹이 발전하면서 사용자들이 원하는 기능이 많아지고 그에 따라 처리해야 하는 interaction 이 늘어나게 되어 기존의 기술에서는 한계를 느끼게 되는데,  이로 인해 개발된 것이 Front-end Framwork 이다.

 

1세대 웹에서는 HTML/CSS, JavaScript, DOM, Event 와 같은 기능들이 주로 사용되어졌는데, 점점 웹이 발전하게 되면서 DOM의 기술들이 빈번하게 사용되는 경우가 많아져 jQuery 가 등장하게 된다. jQuery는 쉽게 말해 DOM을 조작하는 Method들의 모음이다. 

그러나 jQuery 만으로는 해결되지 않는 문제들이 많다는 것을 알게되고 이러한 시대적 요구사항에 맞춰 등장한 것이 Angular, Vue, React 이다. 이 세가지가 바로 Fron-end Framwork & Library 이고, 이 중 React는 Library이다. 

 

 

Framework vs Library ?

둘은 다른 사람이 만들어 둔 코드라는 공통점을 가지고 있지만

Framework는 다른사람이 만든 frame 안에서 내가 작업하는 것이고,

Library는 내 작업에 다른사람이 만들어 둔 코드를 가져와서 사용하는 것이다. 

 

왜 React를 사용해야 할까 ?

- 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용한다.

- 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있다. 

- 많은 사용자수를 기반으로 생태계가 활성화 되어있다.

- 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있다.

- React Native 등이 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장이 가능하다.  

 

 

2. what is React ?

: 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리이다.

 

-  리액트와 같은 프론트엔드 Library 혹은 Framework를 사용하는 가장 큰 이유 중 하나는 UI 를 자동으로 업데이트 해준다는 점이다. 

이로인해 선언적인 개발이 가능하다. 

- UI를 자동으로 업데이트 하는 과정에서 Virtual DOM 을 통해서 최적화를 구현한다. 

 

 

 3. 선언적 (declare)

React 는 "무엇" 에 대해 구현하는 방식이다. 

즉, 원하는 결과물을 선언해 놓으면 React가 구현해준다! 

 

 

 

 

4.Virtual-dom

DOM 의 조작이 발생할때마다 Layout 과 Paint 의 과정을 거치게 되는데 React가 화면을 바꿀때 매번 DOM을 건들이는 것이 비효율적이게 된다. 따라서 React 에서는 가상의 돔(virtual-dom)에서 유지하며 화면을 변경할 때도 virtual-dom 을 통해 변경한 뒤 실제 브라우저의 DOM 을 한번의 변경만 발생시킨다. 

 

 

 

5. NPM

: node package manager 의 약어이다. 

노드로 실행할 수 있는 하나하나의 프로그램들을 관리하는 역할을 한다. 

 

6.CRA

: Creat React App 의 약어이다. 

즉, 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다. 

리액트는 UI 기능만 제공하기 때문에 개발자가 직접 구축해야 하는 것들이 많다. 

CRA는 리액트로 웹 어플리케이션을 만들기 위한 환경을 제공하며 하나의 명령어로 리액트 개발 환경 구축이 가능하다. 

 

CRA 설치하는 방법! 

// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. webucks-react 프로젝트 설치
npx create-react-app webucks-react

// 3. my-app 프로젝트 진입
cd webucks-react

// 4. 로컬 서버 띄우기
npm start

이렇게 설치하고자 하는 폴더에 들어가서 프로젝트를 설치 한 뒤, 로컬 서버를 띄우면 된다! 

 

 

 

 

설치 완료 후 이러한 창이 뜨면 정상적으로 설치된 것이다! 

 

 

 

 

7.node_moduls - pakage.json - gitignore

• node_moduls : npm으로 다운받은 모든 패키지들이 저장되어 있는 폴더
• pakage.json : 프로젝트의 상세정보를 기입해둔 명세서
• gitignore: git으로 관리하지 않을 파일이나 폴더를 기입해둔 파일

 

 

 

 

 

8. Components

Component는 재사용이 가능한 각각의 독립된 모듈을 말한다. 

front-end 의 UI 측면에서의 component는 재사용이 가능한 UI 구성단위라고 할 수 있다. 

컴포넌트를 레고블럭이라고 비유하면 이해하기가 쉽다. 

레고블럭을 하나하나 조립하여 하나의 물건을 만드는 것이다.

 

 

 

 

 

 

 

 

9. JSX

JSX는 JavaScript 확장버전이다. javascript syntax extention 이라고 한다. 

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

이렇게 javascript 코드 내부에 html 문법을 작성한 것이 JSX 이다. 

 

 

 

++추가 

 

• props : property의 줄임말이다. 컴포넌트에서 parameter로 해당 property를 받아서 사용한다. object이고 읽기전용!
• state: 컴포넌트의 상태 값. 마찬가지로 object지만 컴포넌트 내에서 정의하고 사용하며 업데이트가 가능하다. state의 이름은 원하는대로 지을 수 있고 여러개를 추가할 수도 있다.