22.09.08 목요일
📝 React(리액트)
✏️ React의 필요성
정적으로 서버를 관리하면 과부화로 동적의 필요성이 생긴다.
정적 작업은 생산성이 높고, 변화에 느리다.
동적 작업은 생산성은 떨어지지만(개발자들이 프로그래밍하느라 머리가 아픔), 변화에는 압도적이다.
✏️ React 맛보기 ( 일단, 작성법을 공부하자)
일단 리액트를 사용하기전에 셋팅을 해준다.
셋팅은 CDN방식으로 한다
CDN : Content delivery network
--> 인터넷에 있는 외부 파일을 별도의 설치 과정없이 편하게 '모듈 연결'하는 방식
단점 : 의존성이 생김 / 서버가 끊기면 다 끊어짐
1. <head></head> 안에 아래 태그들을 복사 붙여넣기 해준다.
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body></body>안에script부분에 복사 붙여넣기 해준다.
<script type="text/babel" data-type="module">
📝 생성자함수(constructor function)
: 객체를 찍어내는 생성자 함수 ( 객체 생성을 위한 함수 )
: 여러개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해
✏️ 생성자함수와 일반함수의 차이점
없지만, 관례를 따른다.
1. 함수 이름의 첫 글자는 대문자로 시작 // 일반함수와 구별하기 위한 관례
2. 실행은 반드시 new 연산자를 붙여 실행!
3. this.프로퍼티를 통해서만 프로퍼티 명시만 가능
✏️ 생성자함수 생성
// 먼저 배웠던 생성자함수 - old로 구분
function OldConstructor(id,name,type) {
this.id = id;
this.name = name;
this.type = type;
}
const OldInstance = new OldConstructor(1,"이상해씨","풀");
console.log(OldInstance);
// OldConstructor { id: 1, name: '이상해씨', type: '풀' }✏️ class 문법으로 생성자함수 생성
규격화된 생성자 함수 작성법의 필요성으로 나타난 것이 바로 class문법
class는 큰 데이터를 다룰 때 많이 사용 → 그래서 작성법이 독특
class를 선언할때는 반드시 constructor()라는 함수를 사용
선언 하는 constructor() 라는 이름은 다른 이름으로 바꿀 수 없음
대신 class 자체의 작명은 가능
// class문법으로 생성자함수 작성
class NewConstructor{
constructor(id,name,type){
this.id = id;
this.name = name;
this.type = type;
}
}
const newInstance = new NewConstructor(4,"파이리","불");
console.log(newInstance);
// NewConstructor { id: 4, name: '파이리', type: '불' }✏️ 실습
class Capsule{
constructor(name,roasting,number){
this.name = name;
this.roasting = roasting;
this.number = number;
}
}
const starbucks = new Capsule("starbucks",6,10);
const illy = new Capsule("illy",7,10);
const dolcegusto = new Capsule("dolcegusto",4,16);
const kimbo = new Capsule ("kimbo",5,10);
console.log(starbucks);
console.log(illy);
console.log(dolcegusto);
console.log(kimbo.name);
배운 내용을 토대로 class문법으로 생성자함수를 생성해보았다.
객체 기반의 구조를 채택한 프로젝트는 위에 생성자함수 작성방식 중 한가지를 선정해서 일원화 하는 사례가 많다.
볼륨이 커질수록 의존도가 높아지는 방식이므로, 잘 훈련해서 편리한 작업을 진행하는데에 좋다.
