[리액트] React 완벽 가이드 0~13

강원지·2022년 10월 20일

서론

javascript : 모든 단계를 일일이 작성해야 함 - 명령형 접근방식
ex. 요소 선택, 추가, 이벤트리스너 추가
react : 명확한 용도의 컴포넌트를 통해 유지 보수와 관리가 용이

single page applications(SPAs)
: 링크를 클릭했을 때 새로운 html을 서버로부터 불러온 것처럼 보이지만 현재의 페이지를 동적으로 다시 작성함.

다른 프레임워크와 비교

리액트는 컴포넌트 기반의 UI 라이브러리. 내장된 다른 기능이 많지 않음.
라우팅 기능 필요 시, 서드 파티(제3자) 라이브러리 설치해야 함.
앵귤러 : 컴포넌트 기반의 UI프레임워크. 내장된 다른 기능이 많음. 처음부터 타입스크립트 수용. 대규모 프로젝트에 적합. 리액트와 약간 다른 문법.
Vue.js : 뷰 역시 컴포넌트 기반의 UI 프레임워크.많은 기능. 기능이 앵귤러보다는 적고, 리액트보다는 많음. 라우팅같은 핵심 기능을 포함하고 있어서 뷰 역시 커뮤니티 의존성은 낮음. 하지만 앵귤러를 사용할 때만큼 과부하x.

props 속성
state 상태

javascript

jsbin

import export

//person.js
const person=...
export default person;
//import할 때 명명 상관 x

//app.js
import person from './person.js'
import prs from './person.js'

//utility.js
export const clean=()=>{}
export const basedata=10;

//app.js
import {basedata} from './utility.js'
import {clean} from './utility.js'
//정확한 이름 기술

클래스

메소드는 클래스에 정의한 함수이고 프로퍼티는 클래스에 정의한 변수

Class Human{
  constructor(){
    this.gender='male';
  }
  printGender(){
    console.log(this.gender);
  }
}
class Person extends Human{
  constructor(){//상속 받으면
    super();//생성자에 super추가
    this.name="Max";
    this.gender="female";
  }
  printMyName(){
    console.log(this.name);
  }
}
const person=new Person();
person.printMyName();
person.printGender();

es6/barbel

Class Human{
    gender='male';
  printGender=()=>{
    console.log(this.gender);
  }
}
class Person extends Human{ 
    name="Max";
    gender="female"; 
  printMyName=()=>{
    console.log(this.name);
  }
}
const person=new Person();
person.printMyName();
person.printGender();

spread와 rest 연산자

spread

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...rest } = purpleCuteSlime;
console.log(color);//purple
console.log(rest);//object{name..,attribute}

rest

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers);//sum(numbers[0],numbers[1],numbers[2],  numbers[3],numbers[4],numbers[5])
console.log(result);

구조분해할당

배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장. 스프레드와 달리 일부만 추출 가능.

//배열
[a,b]=['hello','max'];//배열이 아니라 변수 각각 할당
const numbers=[1,2,3];
[n1,n2]=numbers;

//객체
{name}={name:"Max",age:28}
console.log(name);//Max
console.log(age)//undefined

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

참조형 및 원시형 데이터 타입

포인터 복사

const person={
 name:"Max"
};//person은 포인터

const secondperson=person;//포인터 복사

person.name="manu";//포인터가 가리키는 저장소에서 변경됨

console.log(secondperson);//name : manu 출력

객체 복사

: 스프레드 연산자 사용

const person={
 name:"Max"
};//person은 포인터

const secondperson={
  ...person
}//실제 복사본
      
person.name="manu";//포인터가 가리키는 저장소에서 변경됨

console.log(secondperson);//name : Max 출력