React 구조와 활용 (CDN과 CLI 알아보기)
1. React
: 페이스북에서 개발하고 관리하는 사용자 인테페이스를 만들기 위한 자바스크립트 라이브러리
React 주요 extention
1. ES7 React/Redux/GraphQL/React-Native snippets
2. Reactjs code snippets
3. ESLint
4. Prettier - Code formatter
5. Path Intellisense
6. vscode-styled-components
7. React Developer Tools
8. Auto Close Tag
9. Auto Rename Tag
10. Bracket Pair Colorization Toggler
11. Live Server
12. Tabout
13. Indent-rainbow
- Prettier - Code Formatter (설정)
- 가독성을 위해 들여쓰기가 제대로 안 된 경우 한번에 맞춰주는 포매터
- ES7 React/Redux/GraphQL/React-Native snippets
- 리액트 템플릿 자동완성 스니펫
2. Javascript 이해하기
2-1 var, let, const 의 차이점
var
: 중복 선언과 재할당이 모두 가능
: var 는 함수 단위 스코프(function-level scope)
- 같은 이름의 변수 여러번 사용 가능
var a = 10;
console.log(a, typeof a);
var a = "Hello";
console.log (a,typeof a);
let
: 중복 선언을 허용하지 않는다. / 재할당은 var 와 동일하게 가능
: 블록 단위 스코프(block-level scope)
let a = 5;
console.log(a); // 5
a = 10;
console.log(a); // 10
// 에러 중복 선언
let name = "ureca";
let name = 100;
const
: let 과 동일하게 중복 선언을 허용하지 않는다. / const 는 다른 변수들과 다르게 재할당도 불가능
: 블록 단위 스코프(block-level scope)
호이스팅
var 는 호이스팅이 발생
console.log(a); // undefined :: 변수 선언 이전에 변수 참조 가능
var a // 초기화
console.log(a); // undefined
a = 10 // 할당
console.log(a); // 10
=> 뒤에 선언된 변수 a 가 앞에 참조되었음에도 에러가 아닌 uedefined 가 호출
let , const:
호이스팅이 발생하지만, 다르게 작동
console.log(a); // ReferenceError :: 변수 선언 이전에 변수 참조 불가능
let a // 초기화
console.log(a); // undefined
a = 10 // 할당
consloe.log(a); // 10
=> 호이스팅은 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.
3. Default Parameter
function 함수명(인자=기본값, ..){ }
기존 함수
- 인자에 값이 전달되지 않으면 에러는 발생하지 않지만,
인자의 값은 `undefined`가 됨.
function test(msg) {
console.log('전달된 인자 값:', msg);
}
test(); // 전달된 인자 값: undefined
test('hello'); // 전달된 인자 값: hello
Default Parameter
: 기본값을 사용하는 함수
- 인자가 전달되지 않으면 기본값 'hello ureca'가 사용됨.
function dptest(msg = 'hello ureca') {
console.log('전달된 인자 값:', msg);
}
dptest(); // 전달된 인자 값: hello ureca
dptest('잘되나요?'); // 전달된 인자 값: 잘되나요?
4.consise method
- 간결한 메서드 선언
- 객체의 메서드를 선언할 때 간결하게 선언할 수 있다.
[객체의 메서드 기존 방법]
메서드이름: function(){}
[consise method]
메서드 이름(){ }
/* 객체의 메서드를 정의하는 두 가지 방법 */
/* 기존 방법: function 키워드를 사용 */
const user1 = {
id: 1,
name: 'John',
age: 30,
info: function() {
console.log('user info:', this.id, ' ', this.name, ' ', this.age);
}
};
/* 간소화된 방법: function 키워드를 생략 */
const user2 = {
id: 2,
name: 'Jane',
age: 25,
info() {
console.log('user info:', this.id, ' ', this.name, ' ', this.age);
}
};
// 메서드 호출 예시
user1.info(); // user info: 1 John 30
user2.info(); // user info: 2 Jane 25
5. PropertyShortHand
: 변수명과 속성명이 같을 때 사용하기
{
js변수명, ...
}
/* 객체 리터럴에서 속성과 변수명이 같을 때 사용되는 property shorthand */
/* 기존 방식: 변수명과 속성명이 같을 때 값을 명시적으로 할당 */
let user1 = {
id: id,
name: name,
age: age,
info() {
console.log('user info:', this.id, ' ', this.name, ' ', this.age);
}
};
/* property shorthand 방식: 변수명과 속성명이 동일하면 변수명만 사용 */
let user2 = {
id,
name,
age,
info() {
console.log('user info:', this.id, ' ', this.name, ' ', this.age);
}
};
6. Destructuring Assignment
- 배열이나 객체에 입력된 값을 개별적인 변수에 할당할 때 간편한 방식을 제공
- 객체의 속성과 동일한 이름의 변수에 할당
- 배열은 순서대로 변수에 할당
형식 {변수명, 변수명} = 객체
let user = { id: 1, name: 'John', age: 30 };
let { id, name, age } = user;
console.log(id, name, age); // 1 John 30
/* 배열에서 구조 분해 할당:
- 배열은 순서대로 변수에 값을 할당
*/
let area = [10, 20, 30, 40, 50];
const [a1, a2, a3, a4, a5] = area;
console.log(a1, a2, a3, a4, a5); // 10 20 30 40 50
/* 함수에서 반환된 객체를 구조 분해 할당
- 함수에서 객체를 반환하고, 이를 구조 분해 할당으로 처리
*/
function getUser() {
return { id: 2, name: 'Jane', age: 25 };
}
let { id, name, age } = getUser();
console.log(id, name, age); // 2 Jane 25
7.Spread Syntax
Spread Syntax
- 객체의 내용을 복사한 새로운 객체가 생성된다.
- 기존객체에 변경을 해도 반영되지 않는다.
- 형식] ...변수명
- Single page application
요청 온 데이터에 대하여 페이지가 아니라 Json /Xml 을 통하여 서버(RestFul)가 응답
화면을 매번 랜더링 해주어야 함 ajax / 화면 깜빡임이 있으면 안됌 => 페이지가 변하지 않음
요청온 자원으로 페이지를 리프리제이션 해주어야 함 // 너무 무거워!!!
RestFul 자원만 주는 상황이라 Json /Xml 전달하기 때문에 Single page application 구현이 필요
이 모든 html을 dom으로 가지고 있을 수없음
=> React는 Virtual Dom 을 통하여 랜더링 하고 보여줄 페이지만 전달
- 화면을 리랜더링 해주는 객체는 다른 객체 => 불변성
=>
리랜더링을 하기 위해서는 프레임워크가 쉽게 인식할 수 있도록 자체를 수정하는 것이 아니라
새로운 객체를 생성하여 변경!!!!!
객체를 변경하고 싶다면 속성을 직접 변경하는 것이 아닌 복사 후 변경을 진행해야 한다!!!
8. Arrow function
- 함수 축약형, lambda
형식]
(인자) => {} //인자가 없거나, 인자가 2개 이상일 때
인자 => {} //인자가 1개일 때
statement
{} //2줄 이상일 때 작성
//1줄 일때 {}를 생략하면 되고 수행 결과가 return 된다.
9. Module 내보내기
모듈 내보내기 (export)
- 변수, 함수, 객체 등을 외부 모듈에서 사용할 수 있도록 내보내기
- `export`를 사용하여 변수, 함수, 객체를 외부에서 가져올 수 있도록 함.
/* 형식 1] 개별 내보내기
- 변수, 함수, 객체 앞에 `export`를 사용하여 내보냄
*/
// 변수 내보내기
export const title = 'Hello, World!';
// 함수 내보내기
export function add(a, b) {
return a + b;
}
// 객체 내보내기
export const sub = {
subtract(a, b) {
return a - b;
}
};
/* 형식 2] 한 번에 여러 개 내보내기
- 변수, 함수, 객체를 한번에 내보내기 위해 `export {}` 사용
*/
// 변수, 함수, 객체 선언 후 한 번에 내보내기
const title = 'JavaScript';
function add(a, b) {
return a + b;
}
const sub = {
subtract(a, b) {
return a - b;
}
};
// 한 번에 내보내기
export { title, add, sub };
- import(다른 모듈에서 내보낸 변수, 함수, 객체를 가져오기)
- `import {}` 문법을 사용하여 필요한 것을 가져올 수 있음
- 예시: 다른 파일에서 내보낸 모듈을 가져오기
import { title, add, sub } from './test01_module2'; // './test01_module2'에서 title, add, sub를 가져오기
console.log(title); // 'JavaScript'
console.log(add(2, 3)); // 5
console.log(sub.subtract(5, 3)); // 2
10 . CDN (Content Delivery Network)
: 웹 리소스를 빠르게 제공하는 네트워크
=> React 같은 JavaScript 라이브러리를 CDN 링크로 웹에서 직접 불러와 사용
10-1 CDN을 통한 React 및 ReactDOM 가져오기
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react?dev",
"react-dom/client": "https://esm.sh/react-dom/client?dev"
}
}
</script>
=> importmap을 사용하여 React와 ReactDOM을 CDN을 통해 가져옴
=> 로컬에 React 파일을 다운로드하고 관리할 필요 없이, 외부 CDN 서버에서 직접 React 라이브러리를 가져와서 사용
=> 별도의 node_modules 폴더나 번들링 도구 없이도 바로 사용
10-2 React와 Babel 사용 설정
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>=> Babel을 사용하여 JSX를 JavaScript 코드로 변환
=> Babel을 통해 JSX를 순수 JavaScript로 변환 필요
babel.min.js 파일을 외부에서 불러와서 이 변환 작업을 수행하도록 설정
jsx 란 무엇인가?
: JavaScript의 확장 문법으로, React에서 UI를 구성할 때 사용하는 문법
=> UI를 정의할 때, HTML과 비슷한 형태로 작성할 수 있어서 직관적이고 가독성이 좋은 코드를 작성
jsx를 사용하는 이유
: UI를 더 직관적이고, 가독성 높게 작성
React에서 UI를 다룰 때, JavaScript만으로 UI를 정의하면 코드가 복잡하고, 유지보수가 어려울 수 있음
=> JSX는 HTML과 유사한 문법을 사용해서 UI를 선언적으로 작성
Babel
: JSX는 브라우저가 이해할 수 없는 문법이기 때문에, 이를 JavaScript로 변환하는 과정 필요
=> Babel이라는 도구를 사용하여 JSX를 **React.createElement**와 같은 JavaScript 코드로 변환
10-3 React 컴포넌트 사용
JSX는 JavaScript를 확장한 문법으로 react에서 “엘리먼트(element)” 를 생성한다.
const Greeting = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
const App = () => {
return (
<div>
<Greeting name="ureca" />
<Greeting name="world" />
<Greeting name="react" />
</div>
);
};=> Greeting과 App 컴포넌트를 정의
=> Greeting 컴포넌트는 name이라는 prop을 받아서 "Hello, {name}"이라는 메시지를 렌더링
=> App 컴포넌트는 여러 개의 Greeting 컴포넌트를 사용하여 "ureca", "world", "react"라는 이름을 화면에 표시
10-4 ReactDOM과 StrictMode 사용
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);=> ReactDOM.createRoot를 사용하여 Root DOM을 지정
=> React 애플리케이션을 해당 DOM에 렌더링
StrictMode로 감싸진 컴포넌트는 렌더링 시 특정 동작을 엄격하게 체크하여 문제를 발견하고 경고
=> 실제 배포할 땐 빠지나 에러 메세지를 보여줘서 사용!!!
- 전체 내용
React를 CDN을 통해 불러오고, JSX를 Babel을 사용하여 브라우저에서 바로 실행할 수 있도록 설정
=> 일반적으로 사용 X
11. React component
리액트에서 컴포넌트를 선언하는 방식 2가지
1. 클래스형 컴포넌트(class component)
2. 함수형 컴포넌트(function component)
클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
1. class 키워드가 반드시 필요하다.
2. Component로 상속 받아야 한다.
3. render() 메소드가 반드시 필요하다.
: 클래스형 컴포넌트는 this. 으로 접근
함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;
=> 주로 함수형 컴포넌트를 사용한다.
11. CLl
: 사용자가 텍스트 기반 명령어를 입력하여 시스템과 상호작용하는 방식
=> 주로 터미널이나 콘솔에서 명령어를 입력하여 프로그램이나 운영체제를 제어
=> CLI 환경은 Single Page Application을 만들기 쉽도록
Component 및 개발 환경에 대해 설정을 통해 프로젝트를 구조화한 환경을 제공
12. CRA로 react App 생성
12-1 CLI 환경을 NODE.JS를 이용해서 설치
형식] npm install –g create-react-app
12-2 React CLI 프로젝트 생성하기
형식] create-react-app 프로젝트명
✔️node_modules
현재 프로젝트에 포함된 라이브러리들이 설치되는 폴더
이 폴더는 보통 Git과 같은 버전 관리 시스템에 포함되지 않도록 설정되
프로젝트를 다른 사람과 공유할 때는 함께 올리지 않는다. => 삭제 해다 npm i node_modules 로 바로 설치 가능
✔️public
index.html과 같은 정적 파일들이 포함되는 폴더
컴파일이 필요 없는 파일들이 위치, 앱이 실행될 때 브라우저에 직접 제공
✔️src
React에서 작성하는 대부분의 파일들이 이 폴더 안에 위치
이 폴더에 있는 파일들은 특정 명령어에 따라 JavaScript 코드로 컴파일되어 최종 빌드 결과물에 포함
React 컴포넌트, 스타일, 서비스 로직 등 주요 로직이 작성되는 공간
✔️.gitignore
Git에 포함시키고 싶지 않은 파일이나 폴더들을 지정하는 파일
일반적으로 node_modules, 환경 설정 파일(.env), 로그 파일 등을 여기에 명시하
불필요한 파일들이 버전 관리에 포함되지 않도록 한다!!
✔️package.json
프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함
라이브러리가 설치된 node_modules 대신에 이 package.json을 깃에 포함하여 올리게 되며
후에 누군가가 프로젝트를 클론할 때 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치
✔️README.md
보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는곳
해당 저장소에 진입하면 가장 먼저 띄워진다!