✔ React 배경지식

1. 웹 어플리케이션의 발전

정적인 1세대 웹에서 동적인 2세대의 웹으로 발전하면서 그에 따라 frontend Framework & Library - React,Angular,Vue 이 나타났다.

2. Framework와 Library의 차이점

(1) Library - 개발자가 주체적으로 조정할 수 있는 것. (예) 다른 사람이 가져다 둔 장비를 용도에 맞게(택배언박싱 = 일반가위 / 음식조리 = 식가위)사용하는 것.

(2)Framewokr - 정해진 규칙(있는 도구로만)에 따라 해야하는 것. (예) 요리를 해야하는데 과도 밖에 없어 과도로 모든 것을 다 해야함.

3. 그렇다면 React는 무엇에 속할까 ?

정답은~~~ React = Library라고 한다.

4. 자 이제 React를 알아보도록 하자.

React의 정의

사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이며, 선언적 방식이다. (선언적방식 - 원하는 형태를 선언해주기만 하면 리액트가 알아서 움직임을 가진다.)

React를 사용하는 이유는?

리액트와 같은 frontend Framework & Library를 사용하는 가장 큰 이유 : UI를 자동으로 업데이트를 해준다.

리액트는 가상돔(Virtual DOM)을 통해 UI를 빠르게 업데이트 해주기 때문에 사용한다고 한다.

가상돔(Virtual DOM) : 이전 UI상태를 메모리에 유지해서 변경될 UI의 최소의 집합을 계산하는 기술(불필요한 UI업데이트는 줄고 성능이 좋아진다.)

React의 특징도 알아보자.

(1) 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것이 목표이다.(2013 개발)

(2) 리액트는 오로지 View만 담당한다.

(3) 내장된 기능이 부족해 third-party Library를 함께 사용한다.

(4) 페이스북의 지속적인 관리로 생태계가 활성화 되어 있다.

번외편 : React의 사용을 돕는 친구들

세팅 도구들

(1) Node.js : 자바스크립트의 “탈 웹”으로 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경이다. 프로젝트 개발 환경을 구축하는 주요 도구들을 이용하기 위해 필요하다고 한다.

(2) NPM(node package manager) : Node 기반의 패키지를 사용하려고 필요한 패키지 관리 도구 —> 예시) Node.js(=핸드폰) NPM(앱스토어) 역할

(3) CRA(Create-React-App) 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)

✔ 내가 마주한 React의 현실편

내가 지난주 html/css/javascript을 통해 만들었던 인스타그램 클론코딩에게 리액트와의 소개팅 자리를 주선했다.

이들은 첫 만남부터 나에게 시련을 주었다.

시련 1번 : 이들의 첫 만남을 주선하기부터 너무나 어려웠다. 이들의 만남이 이루어지려면 "import React from : react";가 필요했고, 스타일링을 위해 샵(import "./main.css";)도 섭외했다.

시련 2번 : 우여곡절 끝에 만남은 이루어 졌으나, 서로의 성격이 워낙 강성이라, 기존의 JSX와 html 태그들은 마찰이 생겼다. 이를 알아채고 "className"으로 소개팅 장소를 얼른 옮겨주었으나, 그 외에도 "img, input 등" self-closing이 필요했다.

시련 3번 : 이들을 가로막는 모든 요소를 정리했다고 생각했다. 매우 큰 오산이었다. "왜 안되는거야"를 30분 중얼거린 끝에.... "export default Main;"이라는 녀석의 정체를 알게되었다. 오늘의 아픔을 잊지말자... 절대..

시련 4번 : 이제 모든 것을 다 맞췄다 생각했고, "ReactDOM.render"이라는 친구를 소개시켰다. 결과는 처참했다. 기존에 작성했던 페이지의 레이아웃이 깨졌다. 여기저기 날아다닌다... 아직 확인 중이다, 오늘 배우는 React Router & Sass를 하며 해결할 수 있도록 해봐야겠다.

간단회고

무언가 새로운 지식들이 계속 업데이트 되고있다. 내가 잘 챙겨가지 않으면 누구도 챙겨주지 않는다. 그리고 오늘도 한걸음 발전했다. 리액트라는 녀석은 초면인데 이 친구와 나의 잔잔바리 기술이 들어간 인스타그램 클론을 연결하지 않았는가 매일매일 발전하는 삶을 살자
오늘은 여기까지!