리액트 개론

Framework, library 에 대해 알아보자.

 

 

공통점:

다른 사람이 만들어 둔 코드

 

차이점:

Framework - 다른 사람이 만든 틀(Frame) 안으로 내가 들어가서 작업하는 것

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

 

 

 

 

Framework : Angular, Vue

Library : React

 

 

 

 

프레임워크는 신라면, 주방을 제공한다고 보면 되고, 라이브러리는 냄비를 제공한다고 보면 된다.

예를 들어...

 

 

 

▼

 

프레임워크가 모두 제공되서 편리하지만 문제는 신라면만 제공되면 신라면만 먹어야 한다. 또한 해당 조리도구를 익혀야 한다.

하지만 라이브러리는 라면을 끓이기 위한 하나의 도구인 냄비 (남들이 만들어 놓은 도구) 를 제공 받는다. 안성탕면이나 불닭볶음면 등 다른 라면을 끓이는 것은 가능하다.

 

다만 라면 하나 끓이기 위해 냄비라든가 그런 도구들은 자신이 선택, 찾아서 만들어야 한다.

 

 

 

 

 

 

 

 

 

왜 React 를 많이 쓸까?

 

• 자기만의 문법을 가진 Angular, Vue 와 달리 자바스크립트 문법을 그대로 사용한다.
• 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이룩어진다. (오픈 소스 = 누구나 수정, 개선 가능하다는 특징)
• 많은 사용자 수를 기반으로 생태계가 활성화되어 있다.
• 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있다.
• React Native 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능하다. (안드로이드, ios)

 

 

 

 

 

 

 

 

 

 

React 는 한마디로, "사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리" 라고 할 수 있다. 선언적이란게 무슨 뜻일까?

 

 

 

 

▼

 

 

절차적(HOW)

1. 청소기를 돌린다.

2. 빨래를 돌린다.

3. 걸레질을 한다.

4. 쓰레기를 버린다.

5. 등등...

 

 

선언적(What)

1. 깨끗해진 방의 모습을 상상해서 그림을 그린다.

2. 로봇에게 그림을 전달한다.

 

 

 

 

선언적은 최종적인 결과만 신경쓰면 된다. 반면, 절차적은 모든 과정 하나하나 신경써야 한다.

따라서 선언적 개발이 훨씬 유지보수하기 쉽다. (바닐라 자바스크립트는 절차적이라고 볼 수 있다. 밑에 예제 코드를 보면 로그인 폼에서 바닐라 JS 와 달리 리액트는 코드가 간단한 것을 알 수 있다.)

 

 

 

 

 

 

 

 

 

리액트 코드

 

function Login(){
	// 선언할 때 필요한 재료들을 만들기
	const [idValue, setIdvalue] = useState("");
    	const [pwValue, setPwvalue] = useState("");
    
    	const isValid = idInputValue.includes("@") && pwInputValue.length >= 7;
    
    
    // 선언
    return (
    	<form className="loginForm">
        	<input className="id" onChange={(e) => setIdvalue(e.target.value)} />
            	<input className="pw" onChange={(e) => setPwvalue(e.target.value)} />
            	<button className="loginButton" disabled={isValid}>
            		Login
            	</button>
         </form>
     );
 }

 

리액트는 값이 바뀌면 알아서 UI 를 계속적으로 업데이트 해준다.

 

 

 

 

 

 

 

 

virtual DOM

 

virtual DOM 은 리액트가 화면 업데이트하는 과정을 좀 더 효율적으로 할 수 있게 해주는 것이다.  예를 들어 원래 벽돌 가져오고, 톱 가져오고, 페인트 가져오던 것을... Virtual DOM 을 통해 벽돌, 톱, 페인트 를 모두 한번에 창고 가서 가져올 수 있다는 것이다.

 

 

원래 자바스크립트는 DOM 조작을 할 때마다 화면의 배치를 잡고 색칠을 한다. (DOM 조작 -> 레이아웃 -> 색칠)

이는 매번 DOM 조작을 한다. (= 비효율적이다.)

 

 

그러나 리엑트는 실제 DOM 이 아니라 가상의 DOM 을 유지하고 있다.

가상의 DOM 을 바꿈으로써 실제 DOM은 한 번만 바꿔지게 하는 것처럼 한다. 즉 리액트는 최적화를 구현한다고 할 수 있다.

(실제 DOM 을 매번 조작하는 것 아님)

 

 

 

 

 

 

 

 

 

 

Node 와 NPM

 

자바스크립트를 해석하고 실행할 수 있는 도구... 이것은 곧, 자바스크립트를 실행할 수 있는 환경이라고 한다.

 

Node 는 브라우저 바깥에서도 자바스크립트를 실행할 수 있는 환경이다.

리액트로 우리는.. 실제로 웹 브라우저 안에서 작업하는 것이 아니라 우리의 컴퓨터에서 작업한다.

 

NPM 이란 "노드 패키지 매니저" 로 노드를 실행할 수 있는 패키지 하나하나(예를 들어, 최신문법으로 바꿔주는 바벨..같은 것들) 의 프로그램 매니저의 역할을 한다. (앱스토어 역할)

 

 

 

 

 

 

 

CRA : Create-React-App

 

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

하나의 명령만 입력하면 개발 환경을 세팅할 수 있다.

 

 

// 1. Desktop - 폴더 진입
cd Desktop/(폴더명)

// 2. 프로젝트 설치
npx create-react-app (프로젝트명)

// 3. my-app 프로젝트 진입
cd (프로젝트명)

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

 

 

 

 

 

 

 

 

 

index.html , index.js , App.js 관계

 

index.html 

- html 의 엔트리 포인트

- 사용자가 우리 프로젝트를 요청하며 최초로 보여지는 html

 

index.js

- javascript 의 엔트리 포인트

- html 과 react 컴포넌트를 연결해주는 역할을 함, 중간다리

 

 

App.js

- 실제 화면에 보여지고 있는 컴포넌트

 

 

 

 

 

 ReactDOM.render( <App />, document.getElementById('root') );

 

첫번째 인자는 화면에 보여질 컴포넌트, 두번째 인자는 DOM 요소

 

 

1. App 컴퍼넌트는 여러개의 Welcome을 가진다고 가정
2. ReactDOM.render을 통해서 App 컴퍼넌트를 호출
3. App컴퍼넌트는 각 Welcome 컴퍼넌트를 호출 (재사용)
4. 전달한 props에 따른 각각의 Welcome 컴퍼넌트 내용이 호출되는걸 확인 가능

 

 

 

 

 

 

 

 

 

 

 

import 할 때 주의사항

 

주의 import 하려면 내보내는 쪽에서 export default 해주어야 한다.