React 시작 - What is React?

Steve·2021년 9월 23일
하
0

3세대 웹이 왜 등장했을까?
웹의 요구는 많아지고, UI/UX는 복잡해져서
3세대 웹으로 발전해서 프/백으로 나뉘어짐

대표적3세대 웹 프레임워크 3개
리액트, 앵귤러, 뷰

리액트란?(페이스북이 만듬)
사용자 인터페이스(UI)를 만들기위한 라이브러리

리액트 특징
virtual dom기반으로 동작
컴포넌트만 기반으로 개발
jsx사용
선언적인 개발을 가능하게 함

LifeCycle란?
constructors
render
componentdidmount
componentdidupdate
componentwillunmount

cra란?
creact react app
개발환경 세팅 도구
웹개발을 하려면 필요한 도구들을 묶어서 환경세팅을 해야함
직접하기 힘듬. 이미 모아진 도구들을 한번에 세팅해줌 .cra를 통해
리액트 프로젝트를 만들기 위해 필요한 도구들을 다 모아놓은 툴체인이라는 cra가 하는 역할

컴포넌트란?
재사용이 가능한 UI 단위
이 컴포넌트를 모아서 쌓아서 큰 웹을 만듬.

JSX란?
javascript syntax의 약자.
자바스크립트의 확장 문법
자바스크립트 문법에 포함돼있진 않다.
html을 그 안에서 쓸수 있다.
원래 markup을 html안에서 했어야 했는데 그게 불편한거다.
자바스크립트 안에서 마크업을 해줄수있게 동작을 시켜주는 확장 문법
*마크업 언어: 문서의 구조를 표현해주는 언어

  1. Why React?
    목표 : 어떠한 흐름으로 오늘날 react가 많이 사용되고 있는지 설명할 수 있다.

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

  • html/css

  • javascript

  • dom

  • event
    이벤트를 통해 돔을 실시간으로 조작

  • 2세대
    -> jQuery의 등장(Method 모음)
    이걸 통해 돔조작이 조금 더 편해졌다.
    근본적인거 아직 해결이 안됐다.
    이때까지도 귀찮게 돔을 계속 건드려야했다.

  • 3세대 웹의 등장

  1. 앵귤러

  2. 뷰

  3. 리액트
    돔을 직접 조작할 필요 없게됨

    1-2 Frontend framework(Library)

    프레임워크와 라이브러리의 공통점
    다른 사람이 만들어놓은 코드다
    차이점
    프레임워크 : 남들이 만들어놓은 코드 속에 들어가서 코드한다. 그 안에서만의 또다른 문법이 있어서 따라써야함
    라이브러리 : 남들이 만들어놓은 코드를 우리 작업환경에 가지고 와서 쓴다. 공개된 코드를 가지고 와서 그냥 쓰는것. 좀더 가벼운 형태

    앵귤러 :
    2010 구글에서 만든 프레임워크
    typescript 기반으로 매우안정적이고 탄탄한 frontend app 개발이 가능하며 프레임워크답게 다양한 기능이 내장돼있다.
    무겁고 배우기 어렵다는 단점.

    vue :
    2014 evan you라는 개인이 개발한 프레임 워크
    코드가 깔금하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장속도가 매우 빠름

React :
" 지속적으로데이터가 변화하는 대규모 어플리케이션 구축하는 것"을 목표로 2013 페이스북에서 개발한 라이브러리
자바스크립트 돔 조작통해선 감당이 안됨.jQuery로도 기술력에 한계가 있음

MVC(Model-View-Controller) Architecture(ex. vue, angular)와는 다르게, \
리액트는 오로지 view(UI)만 신경쓴다.

UI만 신경쓰다보니 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. react-router, sass)를 덧붙여서 개발환경을 세팅한다.

페이스북의 지속적인 관리오 함께 생태계가 활성화돼있으며 다양한 자료가 있다.(내가 고민하는 것들을 구글링하면 이미 같은 고민을 한 자들의 글들이 올라와있다.)
리액트로부터 파생된 편리한 기능들이 많이 나와있다.수요가 많다.

What is React?

2-1 React 정의
사용자 인터페이스 (UI)를 만들기 위한 JS Library
리액트와 같은 프론트엔드 library 혹은 framework를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점.선언적인 개발이 가능하게 됨

리액트는 가상돔(virtual DOM)을 통해 UI를 빠르게 업데이트

가상돔(virtual DOM)
이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소집합을 계산하는 기술

이 기술 덕분에 불필요한 업데이틑 줄고, 성능은 좋아진다.

  1. settings
    3-1 node.js & npm

node.js (자바스크립트 실행 환경)

기존 html과 js를 연결해서 브라우저에서만 동작하던 언어를
자바스크립트가 브라우저 밖에서도 (ex.서버) 동작하게 하는 환경
자바스크립트의 탈웹

리액트를 쓸 때 왜 노드js가 필요하는가?
리액트의 환경을 구축하려면 여러가지 많은 도구들이 필요함.
cra라는 툴체인, 내부적으로 babel이라는 코드를 변환시켜주는 웹앱. 최신문법들이 옛날 문법들로 호환되는.
여러가지 분리된 파일들을 하나로 합쳐주는 webpack
프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js기반
위엣것들이 다 자바스크립트로 쓰여져 있다.걔네들을 바라우저에 올리기전에 한번 돌려야한다. 그 때 쓰이는게 Node.js기반으로 여러가지 패키지들이 쓰이기 때문에 이 노드를 설치해야한다.

npm

node package manager
노드가 실행환경
그 환경에서 하나하나 돌릴수있는 어플리케이션들을 패키지라는 이름으로 부른다.(노드를 실행할 수 있는 여러가지 프로그램들)
노드를 실행할 수 있는 여러가지 패키지들을 매니징 할 수 있는 툴.
node.js 설치 시 자동으로 설치
node 기반의 패키지를 사용하려면 npm이라는 패키지 관리 도구가 필요.
npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.

비유)
스마트폰 : 구글플레이여 = Node : npm

3-2 cra(create react app)
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain)

  1. cra - settings
    4-1 cra 설치
  2. desktop - wecode 폴더 진입 : cd Desktop/wecode
  3. westagram-react 설치 : npm create-react-app westagram-react
  4. westagram-react 프로젝트 진입 : cd westagram-react
  5. 로컬 서버 띄우기 : npm start

node modules, package.json, .gitignore 이 3개의 연관성에대하여..

노드로 돌아가는 하나하나의 패키지들을 module이라고 표현하기도 함.약간의 늬앙스 차이
node_modules : 모듈들이, 패키지들이 모여있는 폴더.
cra를 하면 개발하는데 필요한 패키지들을 다운로드하고 세팅해준다. 그 패키지들이 모여있는곳.
.gitignore
*참고) cra를 하면 git이 등록된 상태로 나옴(git init 된상태로 나온다는 뜻)
설치하자마 마스트 브랜치로 딱 뜬다.
깃에서 무시할것들을 적어주는 곳(깃으로 관리를 안하게 된다)
여기에 node_moudules도 포함

package.json 덕분에 협업을 할 수 있게 되는것
우리가 만든 프로젝트도 하나의 패키지.
우리가 만든 프로젝트의 모든 정보가 담긴다.
script 명령어.(우리가 커스터마이징한 명령어를 추가할 수도 있다.)
npm run start(start에만 특별히 run을 생략할 수 있다.)
npm build, npm test, npm eject

"dependencies"

의존하다. 우리 프로젝트 돌리려면 여기에 있는 것들 있어야 한다.
.gitignore에 node_modules 등록해서 github에 안올렸다. 안올려도 되는이유가 dependencies에 등록해 놓기 때문이다.우리가 필요한 패키지들을 저곳에 등록해 놓기 때문에.
node_modules를 삭제한 상태로 npm start를 하면 작동이 안된다.
npm install를 통해 package.json의 dependencies를 쫙 읽은 후 자동으로 모두 설치.

4-2 cra 기본폴더 및 파일 구성
1) node.modules

  • cra 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
    2) package.json
  • 우리가 만들고 있는 어플리케이션에 대한 정보가 기록된 파일
  • cra 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류,버전)가 이 파일내부에 기록됨(디펜던시스에 기록됨)
    3) .gitignore
  • github에 올리고 싶지 않은 폴더와 파일을 이곳에 작성

*참고 npm install 할때 자동으로 보통 package.json의 dependencies에 들어가지만 안들어가는 것들도 있다. 그런것들은 npm install 블라블라 --save를 해줘서 강제로 주입.

public 폴더의
index.html에

src폴더의 App.js, index.js

index.js 안에
import React from 'react';
import ReactDOM from 'react-dom';
// 폴더가 안적혀 있으면 node_modules에서 가져온다는 뜻
ReactDOM.render(, document.getElementById("root"));

해석 : 남들이 만들어 놓은 객체 ReactDOM을 node_modules에서 import 한후

render라는 메서드를 호출한다.
id가 root인 돔요소를 2번째 인자로.
<- JSX에서 컴포너트를 표현할 때 이렇게 함.

ReactDOM과 render 사이에 dot이있다.
남이 만들어 놓은 패키지의 코드를 가지고 왔다.
객체의 요소에 접근할 때 닷을 씀.
ReactDOM은 객체겠구나 하고 생각할 수 있음. 닷이 있기 때문에.

import App from "./App"
같은 폴더내의 App을 불러오라.
../
나를 갖고 있는 폴더의 폴더.즉 상위폴더를 지칭함

결론 : 만들어 놓은 컴포넌트를 index.html에 넣어주기 위해 index.js안에 작성한다.
// index.js
ReactDOM.render(, document.getElementById("root")); //App 컴포넌트를 돔 노드에 넣어준다.

새로운 파일을 만들 때 예시
// Login.js
import React from 'react';

클래스형 컴포넌트 만드는 방법.
화면에 랜더링 되는 요소를 만드는게 컴포넌트의 목적
UI 요소를 만드는게 컴포넌트의 목적

class Login extends React.Component { // 첫글자 대문자가 컨벤션
 // Reacgt안에 Component라는 클래스가 이미 만들어져있다. 그걸 이용
 render(){
 	return <H1>hihi</H1>
 }
}
export default Login;
import Login from "./Login"; // Login 파일에서 import하는 것들까지 같이 import한다.
// Login.js에서 import "./Login.css" 한것까지 같이

ReactDOM.render(<Login />, document.getElementById("root"));

중요 3파일
index.html
index.js // 중간 다리역할 -> App컴포넌트를 index.html에 넣어줌
App.js( 어떤 컴포넌트냐에 따라 이름 바꿔불러라)

폴더구성

src/components // 공용으로 사용되는 컴포넌트들이 들어감
src/ pages/Login
안에 Login.css, Login.js
src/ pages/Main
안에 Main.css, Main.js
*참고) 해당 페이지 내에서만 사용하는 컴폰넌트의 경우 해당 페이지 폴더 하위에서 관리

src/styles

브라우저별로 동일한 세팅을 위해 reset.css
common.css
위파일들은 모든 컴포넌트들이 거쳐가는 index.js에서 import해주는것이 효과적
이제 각각 컴포넌트마다 각각 임포트를 해줄필요없음

public안에는 images와 data폴더생성
public폴더는 js파일에서 바로 접근 가능.
js파일 내에서 이미지를 불러올때
처럼 안불러오고

4 CRA - settings
4-2. cra 기본폴더 및 파일 구성
index.html index.js App.js
1) index.html

2)index.js

  • ReactDOM.render(, document.getElementById("root"));
  • ReactDOM.render 함수의 인자는 2개
  • 첫번째 인자는 화면에 보여주고 싶은 컴포넌트 / 두번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치

3) App.js

  • 현재화면에 보여지고 있는 초기 컴포넌트
  • westagram 작업시 컴포넌트, 컴포넌트를 그자리에 대체하여 작업

public 폴더

  • index.html
  • images 폴더 - 이미지 관리
  • data 폴더 - mock data관리 (추후 세션을 통해 학습)

src 폴더

  • components - 공통 컴포넌트 관리

  • pages - 페이지 단위의 컴포넌트

  • Login 폴더 - Login.js, Login.css

  • Main 폴더 - Main.js, Main.css

  • styles 폴더

  • reset.css - css초기화

  • common.css - 공통으로 사용하는 css 속성 정의(ex. box-sizing, font-family)

    5. Component

    목적 : 컴포넌트의 개념과 종류에 대해 설명할 수 있다.

재사용 가능한 UI 구성 단위

5-1-2 컴포넌틔 특징

  • 코드 재활용 증가
  • 코드 유지보수에 용이
  • 해당 페이지가 어떻게 구성돼있는지 파악 용이
  • 컴포넌트는 또다른 컴포넌트를 포함(부모 컴포넌트 - 자식 컴포넌트)

5-2 clas vs Functional Components

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 2가지가 있다.

1) Class형 컴포넌트(Class Component)
2) 함수형 컴포넌트(Functional Component)

클래스 컴포넌트의 특징

render함수가 꼭 있어야하고, 그 안에 보여주어야 할 JSX를 반환한다

함수형 컴포넌트가 더 유용하지만 클래스 컴포넌트를 먼저 학습한다

왜?

props,state,lifecycle 등 주요개념이 더 직관적이고 배우기 쉽다.

6. JSX

JSX를 정의하고 기본 특성에대해 설명할 수 있다.
javascript XML
6-1 JSX 정의
리액트에서 사용하는 자바스크립트 확장 문법 ( javascript syntax extension)

6-2 JSX 장점
HTML 태그를 그대로 이용하기 때문에 보기쉽고 익숙
html 마크업과 javascript 로직 구현을 같이 할 수 있음
javascript문법을 이용해서 html을 생성할 수있음
DOM을 가져와서 event를 붙이는 방식을 이제 한번에 처리할수있음

바벨(Babel)을 통해 실제 html을 만드는 createElement로 변환됨

6-3 JSX 특징
하나의 부모태그
self closing
camelCase property(class -> className)
className, onChange, onClick
javascript 동작 가능 -> {}

"kang" + "seonggoo"

// kang" + "seonggoo"

{"kang" + "seonggoo"}

// kangseonggoo 함수는 자바스크립트 
class Main extends React.Component{
  alertMessage = () => {
    alert("react intro end");
  }
  
  render() {
    return (
		<>
      <h2 className="title" onClick={this.alertMessage}>{"kang" + "seonggoo"}</h2> // kangseonggoo // 이 컴포넌트 안에 있는 함수를 쓸때 this.
      </>
    );
  }
}

document.getElement 할필요없이 마크업 하면서 바로 로직도 붙일수있으니 훨씬 편하다

profile
Steve
Front-Dev
이전 포스트

공통 문자가 포함된 문자열 추출

다음 포스트

React - react router, sass

0개의 댓글