Hook의 규칙 https://ko.reactjs.org/docs/hooks-rules.html Hook은 React 16.8에 새로 추가된 기능이다. Hook은 클래스를 작성하지 않고도 State와 컴포넌트의 Life Cycle의 관리가 가능해졌다 Hook은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다
첫번째. 최상위(at the Top Level)에서만 Hook을 호출해야 한다 반복문, 조건문 혹은 중첩된 함수(함수 안에 함수) 내에서 Hook을 호출하면 안된다 두번째. 오직 React 함수(함수형 컴포넌트)내에서 Hook을 호출해야 한다. 클래스에서는 사용불가이다 Hook을 일반적인 JavaScript 함수에서 호출하면 안 된다 단, Custom Hook에서 Hook을 호출할 수 있다.
한마디로....
*** hook함수는 컴포넌트인 함수 안에서만 호출이 가능하고, 반복문이나 조건문 등에서는 호출할 수 없다.
단, 함수형 컴포넌트가 아니라도 custom hook(컴포넌트는 아닌데 나만의 hook을 만들 수 있는 함수 임)
에서는 호출 할 수 있다.
[useState Hook]
컴포넌트의 상태정보값. 즉, state를 생성(사용)하고 업데이트할 수 있게 해주는 함수로 두 개의 값을 담은 배열을 반환한다.
동일한 컴포넌트를 재사용하더라도 각 컴포넌트의 state는 독립적이다. *** 만약 UI에서 상태를 변경시켜야 한다면 하나의 컴포넌트로 분리하자.*** 동일한 컴포넌트라도 컴포넌트마다 상태를 별도로 유지하기 위해서다.
const [state,setState] = useState(초기값 혹은 콜백함수);
state:컴포턴트의 현재 상태값 ,(얘는 객체? 변수고) setState:컴포넌트의 상태를 변.경.할. 수. 있.는. 함수. (얘는 함수다....) 변경시에는 setState(대체값 혹은 콜백함수); 콜백함수는 컴포넌트 성능 최적화시에 유리하다
콜백함수를 인자로 전달하면 해당 콜백함수는 마운트될 때(컴포넌트가 DOM에 붇을 때 )에만 한 번 호출된다.
DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법
DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery등의 라이브러리를 사용하여 동적인 효과를 줄 수 있다.
하지ㅣ만 최적화 되어있지 않기 때문에 많은 동적인 ul가 있다면 어플리케이션의 속도가 어어어어엄청
느려질 수 밖에 없음. 따라서 최소한의 DOM 조작을 통해 작업을 처리하는 방식으로 이를 개선 할 수 있다. 그 중에 DOM작업을 가상화 하여 미리 처리한 다음 한꺼번에 적용할 수 있는 방법이 있다.
그게 바로 가상돔!!!!
-Virtual DOM이란?
Virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. (실제 DOM의 가벼운 복사본이다) 가상 DOM은 실제DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 때만 해당 내용만 반영 한다. 그래서 성능 향상을 가져오게 하는 개념이다
후려치자면
실제DOM 은 있음
이걸 그대로 가상의 메모리에 복사함
변경할 내용이 있다면 가상DOM을 변경함
변경된 부분을 실제 돔에 적용시키는 개념!!
※React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차를 따른다
A) 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링. B) 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교. C) 바뀐 부분만 실제 DOM에 적용. (컴포넌트가 업데이트 될 때 , 레이아웃 계산이 한 번만 이뤄어진다)
즉, React는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축을 위해서 탄생하였다.
예] DOM => 요게 실제 돔 <ul class ="list"> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> </ul>
Virtual DOM은 직접 DOM API를 사용하지 않고, 변경된 부분만 JSON 객체를 Update한다 이러한 처리는 실제 DOM이 아닌 메모리에 있기 때문에 훨씬 더 빠르다 !!!
[Component]
재사용이 가능한 HTML 코드 조각이다
리엑트는 Component기반임!!
컴포넌트는 두가지로 나눔
class형 vs 함수형
- 함수형 component는 상태를 유지 할 수 없다. 그래서 변화하는 데이타를 가지려면 클래스형 component로 만들어야 했다
- 함수형 컴포넌트는 props를 입력으로 받아서 JSX(React Element)를 출력(리턴)하는 기능을 수행한다.
- 클래스형 컴포넌트는 state(data-객체?)를 가질 수 있고 반드시 render( )함수를 가져야 한다. 변화하는 데이타가 있는 컴포넌트는 클래스 컴포넌트로 만든다
- 함수형 컴포넌트는 함수 호출이고 클래스형 컴포넌트는 생성자 함수 호출이다
- 함수형 컴포넌트는 메모리를 적게 사용한다. 그리고 생명주기가 없다 하지만 클래스형 컴포넌트는 생명주기를 가지고 있다.
- 컴포넌트가 반환하는 것은 JSX이다 - ※리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. - ※초기 리액트는 State와 컴포넌트의 Life Cycle을 관리하려면 클래스형 컴포넌트를 생성 해야했다. UI만 표현해주는 컴포넌트는 함수형 컴포넌트로 만들었다. 리액트 16.8부터는 모든 컴포넌트를 함수형 컴포넌트로 만들수 있게됐다. 함수형 컴포넌트에서도 리액트 훅 API로 State와 컴포넌트의 Life Cycle의 관리가 가능해졌다.
SPA (single page Application) - 페이지 1개(그리고 엄청난 js파일)로 웹을 만듦!!!
angular.js > react.js > vue.js
[React.js 라이브러리]
페이지 단위로 개발하는 경우는 주로 다른 프레임워크나 라이브러리를 함께 사용하면서 부분 페이지에 React를 적용할 때 주로 사용하는 방식이다.
1. 개발환경 구축
1-1. Node.js 설치( 자바스크립트를 실행하는 환경 , JVM같은 역할 )
-https://nodejs.org/ko/ 에서 Stable 버젼 다운로드 -NPM(Node Package Manager)는 모듈의 설치 및 모듈간 의존성 관리를 위한 자바스크립트의 패키지 매니저이다 ( 파이선에 pip같은거)
1-2. YARN 설치(옵션사항) -- 이건 설치 안함 -페이스북이 만든 NPM과 같은 자바스크립트 패키지 매니저로로 더욱 더 빠르고 캐쉬 및 자바스크립트 라이브러리 의존성 체크에 있어서 NPM보다 성능이 우수하다
1-3. 코드 에디터(Visual Studio Code)
1-4. Create React App(CRA) -- Spring boot같은 아이임
Create React App은 리액트에서 공식적으로 지원되는 SPA React 애플리케이션을 만드는 방법이다. Webpack(모듈 번들러-수많은 js를 묶는놈)이나 Babel(transFiler-- ES5->ES6로 변환)l과 같은 설정이 필요 없는 최신 빌드 설정을 제공한다.
npx create-react-app 프로젝트명 프로젝트명에 해당하는 폴더가 생기면 해당 디렉토리로 이동후 npm [run] start로 실행 cd 프로젝트명 npm start
1-5. 리액트 어플리케이션의 주요 구성파일
src/index.js : 브라우저의 실제 DOM 내부에 리액트 컴포넌트(화면을 구성하는 기준공간 ? )를 렌더링하는 소스가 있다. 즉 id 가 root 인 <div>라는 DOM 을 선택하고 리액트 컴포넌트의 렌더링(그안에 쏙 들어간다구....) 결과가 위 div 내부에 렌더링 된다
src/App.js : 리액트 앱의 화면 컴포넌트를 정의하는 최상위 컴포넌트이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의한다.
pulic/index.html : index.js에 의해 렌더링된 결과가 표시되는 HTML 템플릿 파일이다
※PUBLIC_URL는 리액트에서 제공하는 접두어로 배포시 사이트 URL이 설정된다.
리액트 앱에서 public폴더를 나타낸다 즉 정적인 자원 .css 나 .js 혹은 이미지 파일들을 public폴더에 저장하고 HTML태그에서 링크를 걸때는 process.env.PUBLIC_URL 을 사용한다
- index.js의 root.render()에 의해 렌더링되는(쉽게 말해 '실제 화면으로 구성이 된다' 는 뜻) 리액트 엘리먼트(자바스크립트 객체, 즉 화면을 구성하는 컴포넌트!)를 쉽게 만들기 위한 자바스크립트 확장 문법이다(또 쉽게 예를 들면 자바스크립트안에 html 태그가 들어가도 에러가 안난다 !!!! 오?) - 리액트는 JSX 사용이 필수가 아니지만 JavaScript 코드 내부의 UI 작업을 할 때 시각적 도움 때문에 많이 사용한다.
- JSX는 문자열도 HTML도 아닌 태그 형태의 자바스크립트 확장 문법으로 자바스크립트 객체(object) 이다.
JSX Syntax를 입력하면 babel 이 JSX 를 JavaScript 로 변환을 해준다.
왼쪽에 <h1> 이게 절대 태그가 아님!! 자바스크립트객체다 !!! 오른쪽 보다 왼쪽처럼 저렇게 태그작성하듯 사용하는게 쉽겠죠????
- JSX 태그는 HTML 태그 뿐만 아니라 사용자 정의의 임의 태그(컴포넌트 , ex. <App /> )로도 구성이 될 수 있다.
예. js파일
import './App.css';
function App() {
const tag=<h2>Hello React</h2>
/*이게 JSX 래.. <h2>가 태그가 아님 태그쓰는것 처럼 사용하는거 뿐임!*/
return <> {/*이건 루드엘리먼트래 반드시 존재해야 한다고 함...*/}
{tag} {/*변수를 이렇게 넣어서 사용할 수도 있고! 자바스크립트를 쓸땐 저렇게 {}로 감싸야 한다!!*/}
</>;
}
export default App;
- JSX내에 자바스크립트 코드를 작성할때는 JSX Expression인 {자바스크립트코드}를 사용하여 작성한다 {} 로 감싸야 한다고.. - JSX에서 주석처리는 {/* 주석 */}으로 처리한다 - JSX의 속성은 속성값이 자바스크립트 변수일때는 속성명={자바스크립트변수} 식이나 일반 값일때는 속성명="속성값"으로 한다
- JSX를 if명령문과 for루프 안에서 사용할 수 있고 , 변수에 할당하고, 인수로 받아 들여 함수에서 반환 할 수 있다. 단, JSX를 반환하는 return 문에서는 제어문을 사용할 수 없다(if , for return 에다가는 못쓴다구!! )
- JSX는 HTML보다 자바 스크립트에 가깝기 때문에 React DOM은 camelCase 형태의 HTML 속성 이름을 사용한다. 예를 들어 class대신 className 그리고 onclick대신 onClick를 속성명으로 사용한다
- JSX에 HTML태그 처럼 style속성을 적용하려면 style="color:red"방식대로 하면 에러난다 JSX내에서 위처럼 스타일을 주려면 style={{camelCase형태의 css속성명:변수 혹은 스트링}} 이때 바깥쪽 {}는 JSX에서 자스를 사용하기 위함이고 안쪽 {}는 자스 객체이다.
- JSX태그에는 자식을 포함 할 수 있는데 없는 경우는 Self closing />을 통해 닫고 자식이 있는 경우에는 반드시 최상위 태그 하나로 감싸야 한다 즉 항상 루트 엘리먼트가 있어야한다 <div>로 감쌀시 div의 스타일 영향을 받을 수 있으므로
import React from "react"; <React.Fragment> </React.Fragment>혹은 import {Fragment} from "react"; <Fragment></Fragment>로 감싸거나 <></>로 감싸면 렌더링시 index.html에 요소가 추가 안되고 JSX에러를 피할 수 있다
그리고 비동기함수1과 비동기함수2는 비동기 작업일지라도 async/await에 의해 비동기함수1이 먼저 실행되고 나서 비동기함수2가 순차적으로 수행되게 된다. 즉 , 비동기 코드를 동기적으로 수행하게 해주는 것이 async / await이다 !!! (위에 틀린 설명의 이유) async ~await패턴에서 실패처리(비동기 함수에서 resect가 호출 될 때) 는 try~catch절로 한다.
예제1.
성공일 때실패일
예제2(이건 교안 다시보기!!!)
예제4 : 진짜 비동기 코드로
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
function promise(){
return new Promise(function(resolve, reject){
$.get('https://jsonplaceholder.typicode.com/posts/1', //비동기코드
function (response) {
if (response) {
resolve(response);
}
reject(new Error("Request is failed"));
}
);
})
}
async function asyncFunction(){
try{
const response =await promise();
console.log(response);
}
catch(e){console.log(e);}
}
asyncFunction();
</script>
콜백함수의 단점인 콜백지옥으로 인해 코드의 가독성이 떨어지고 유지보수도 힘들어 이를 해결하기 위해 ES6에서는 Promise가 표준 내장 객체로 추가되었다.
Promise는 비동기 작업을 동기 작업으로 처리하기 위한 객체이다.
비동기 작업에 대하여, 비동기 작업이 완료된 후 결과 값 또는 실패의 이유를 콜백 함수(resolve,reject)로 전달
- Promise는 3가지 상태값을 가지고 있다(ajax랑 비슷하군) Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fullfilled(이행) : 비동기 처리가 완료되어 Promise가 결과값을 반환해준 상태(resolve()실행) Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태(reject()실행)
성공시실패시
promise 객체
예제2
즉 promise객체가 이행상태(resolve()호출로 테스트 )면 then(콜백함수)의 인자인 콜백함수가 자동으로 실행되고
새로운 Promise객체를 반환한다.
promise객체가 실패상태(reject()호출로 테스트 )면 catch(콜백함수)의 인자인 콜백함수가 자동으로 실행되고 새로운 Promise객체를 반환한다.
비동기작업의 결과 데이터 성공시는 resolve(결과데이터) 호출 시 then (콜백함수 (결과데이터를 받을 변수))
실패시는 reject(결과데이터) 호출 시 catch(콜백함수 (결과데이터를 받을 변수))
예제3
에제4
new Promise(function(resolve, reject){
//비동기 코드 사용
/*
$.get('https://jsonplaceholder.typicode.com/posts/1',
function (response) {
if (response) {
resolve(response);
}
reject(new Error("Request is failed"));
}
); */
//ajax 사용
$.ajax({url:'https://jsonplaceholder.typicode.com/posts/1'}).
done(function(response){
resolve(response)
}).fail(function(e){
reject(e)
});
}).then(function (data) {
console.log(data); //성공
}).catch(function (e) {
console.log(e); //실패
});
예제5
함수 정의 후 맨 밑 두줄 실행
const res = getPosts();
console.log('비동기 함수인 getPosts()호출(res):',res);
getPosts() 호출 후 바로 밑에 코드가 실행 됨! 요거 실행이 완료되기 전에 밑에 코드가 이미 호출되기 때문에
const res =getPosts()는 undifined 가 나옴...
그래서? 비동기를 동기로 만들어야 이 코드가 끝나야 밑에 코드가 순차적으로 실행되어서
undifined가 안나옴 !!!! 그래서 getPosts를 promise함수로 변경해야 한다는 것!!!
function getPosts(){
//XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
//HTTP 메소드 및 요청 URL설정
xhr.open('GET','https://jsonplaceholder.typicode.com/posts');
//서버에 전송
//JSON으로 보낼 때는 반드시 문자열로 변환
xhr.send( );
xhr.onload = ( ) =>{ // 서버로부터 응답을 받았을 때 발생하는 이벤트 : load이벤트
console.log(xhr);
console.log('응답 상태 코드:',xhr.status);
if(xhr.status == 200){
const res=JSON.parse(xhr.response);//JSON객체로 변환
console.log('응답데이타:',res);
return res;
}
else{
console.log('응답 에러:',xhr.statusText);
return;
}
};
}
//const res = getPosts();
*****//console.log('비동기 함수인 getPosts()호출(res):',res);//undefined*******
아무리 위에코드가 빨라도 undefined
그래서!!
function getPostsPromise(){
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest();
xhr.open('GET','https://jsonplaceholder.typicode.com/posts');
xhr.send();
xhr.onload = () =>{
console.log(xhr);
console.log('응답 상태 코드:',xhr.status);
if(xhr.status ==200){
const res=JSON.parse(xhr.response);//JSON객체로 변환
console.log('응답데이타:',res);
resolve(res);
}
else{
console.log('응답 에러:',xhr.statusText);
reject(new Error('에러'));
}
};
});
}
getPostsPromise()
.then(res=>console.log(res))
.catch(e=>console.log(e));
: 수정을 원하지 않는 부분은 전개 연산자를 사용하여 표기하고 수정할 부분만 새로운 값으로 지정하면된다
근데 리엑트에서는 문제가 될 수 있음!
리액트 같은 프론트엔드 라이브러리에서는 위와 같이 수정하면 리렌더링이 일어나지 않아서 수정된 값이 화면에 그려지지 않는다
그래서 아래처럼 수정해서 새로운 객체를 만들어야 한다
(객체의 특징을 이용! 값이 있는데 새로운 객체를 넣으면 객체가 바뀐다 & 키는 중복이 안된다 )
Rest파라미터(나머지 매개변수)
Computed Property Name
문자열 또는 문자열로 변환 가능한 표현식을 사용해 Property Name를 동적으로 생성할 수 있다. 단,Property Name으로 사용할 표현식을 대괄호([…])로 묶어야 한다.
구조분해 할당(Destructuring assignment)
-let ,const 혹은 var ekdma{}가 오면 구조분해 할당을 통해서 선언한 변수에 배열이나 개게의 값을 할당한다는 의미다.
반드시 대괄호로를 넣어 줘야 한다!!
구조분해가 가능한 객체를 할당해야 한다. 구조분해야 가능한 객체는 Iterable Object 이다
[100]은 배열 그냥 100은 iterable object가 어니라서 에러남 !!
구조분해 할당 (변수 선언 후 할당)
기본값 할당도 가능하다
위엔 c 에 100을 , 밑엔 b에 200, c에 100을 기본값으로 설정
Swapping variables -배열 구조분해를 사용하여 값을 바꾸는 것이 한 줄로 표현이 가능하다. let a = 1; let b = 3; //왼쪽에 대괄호 표현은 구조분해 할당을 한다. 라는 의미 //오른쪽에 대괄호는 배열, 즉 a,b 변수에 저장된 값으로 두 개의 요소를 갖는 배열을 만듦 [a, b] = [b, a];
Parsing an array returned from a function] -함수에서 반환된 배열로 구조분해 할당
Ignoring some returned values] -배열 구조분해로 할당된 값을 무시
******* 함수 정의 시 매개변수에 ...을 붙이면 ...은 스프레드 연산자라고 부르지 않고
-CommonJS스펙에서는 모듈을 가져올때 require()함수, 모듈를 내보낼때는 module.exports나 exports.함수명 형태로 사용한다.그러나 ES6에는 외부 모듈의 함수나 객체를 가져올때는 import 내보낼때는 export를 사용한다.
-모듈이 동일한 폴더에 있더라도 "모듈명.js"는 에러발생
즉 "./ 모듈명.js", "../모듈명.js" "/모듈명.js" 으로 사용해야 한다! 생략하면 안된다고 !!
default import방식이 named import방식보다 앞에 와야한다 즉 별칭1,별칭2,..,{}형태여야한다
가.named import방식
-import {name} from "모듈파일"; 형식으로 불러온다
-name은 모듈에 있는 함수나 객체등이다 그래서 이름을 임의로 할 수 없다
나.default import방식
-name은 임의로 바꿀수 있고 { }가 없다 -내보는 모듈 파일안에서 export default는 한 번만 사용가능하다.
다.모듈을 불러올때 named import와 default import방식을 혼합 할 수 있다
-import name,{name1},{name2} from "모듈파일" 다른 모듈에서 함수나 객체등을 내보낼때는 export 와 export default 를 함께 사용하면 된다 단, default export 된 객체를 가져오는 부분이 먼저 선언되야 한다.
파일, 폴더는 요렇게 구성
circle.js
/*
const circle = function(r){
return Math.PI*r*r;
}*/
export const circle = r => Math.PI*r*r;
rectangle.js
export const widthHeight={width:100, height:100}
export const rect =() => console.log('사각형입니다.')
export default function ares(width,height){
return width*height;
}
triangle.js
export let width=100
export let height=100
export const 면적 = (width,height)=> width*height*0.5;
console.log('삼각형 가로폭:',width)
console.log('삼각형 세로폭:',height)
console.log('삼각형 면적:',면적(100,100))
index.js
import {circle} from "./js/circle.js";
import ares,{widthHeight as 폭, rect} from './js/rectangle.js';
//import * as tri from './js/triangle.js';
import "./js/triangle.js" //바로 실행할 목적이라면 요렇게 쓰고
//import {width,hight,면적} from './js/triangle.js';
const index = function(){
console.log(circle(100));
console.log('가로폭:%s,세로폭:%s',폭.width,폭.height);
rect()
console.log(ares(100,100));
//import * as tri from './js/triangle.js'; 일 때
/* console.log('삼각형 가로폭:',tri.width)
console.log('삼각형 세로폭:',tri.height)
console.log('삼각형 면적:',tri.면적(100,100)) */
//import {width,hight,면적} from './js/triangle.js'; 일 때
/* console.log('triangle 가로폭:',width)
console.log('triangle 세로폭:',height)
console.log('triangle 면적:',면적(100,100)) */
}
export default index
/*
요렇게 해도 가능
export function index(){
console.log(circle(100));
}
혹은 요거도 가능
const index = function(){
console.log(circle(100));
}
*/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
<script src="index.js">
// 요건 페이지 방식으로 저 페이지에 있는걸 고대로 가져오는 것
</script>
-->
<script type="module">
// 요건 모듈방식임 !
import module from './index.js'
console.log(module())
</script>
</head>
<body>
<h2>모듈방식 연습</h2>
</body>
</html>
printName(){ } // Person.prototype.printName와 동일 ,앞에 function 키워드사용 불가!
}
2.클래스 표현식
클래스 표현식도 호이스팅 되지 않는다.
나. 클래스의 메소드
A.생성자
B.프로토타입 메소드(클래스의 메소드, 인스턴스 메소드와비슷)
C.정적메소드
A.생성자
-constructor라는 이름을 갖고 주로 객체의 속성 초기화를 위해 사용
-생성자에서 this는 자기자신을 가리키는 키워드
-자식클래스에서 this를 사용하려면 반드시 super()로 부모클래스의 생성자를 호출해야 한다
즉 extends 키워드를 사용 시에는 반드시 constructor에서 super()키워드를 호출해야 한다.!!
-constructor 생략 시 인자가 없는 기본 생성자가 자동으로 추가된다.
1-1.
단, edtends키워드를 미 사용시 super()키워드를 호출하면
SyntaxError :super' keyword unexpected here 에러발생,
1-2.
edtends키워드를 사용시 super()키워드를 호출하지 않는다면
'this' is not allowed before super()에러 발생
1-11-2
B.프로토타입 메소드(클래스의 메소드, 인스턴스 메소드와비슷)
var obj={변수:function(){}}형태에서
var obj={변수(){}}형태로 프로토타입 메소드를 정의 할 수 있다
원래이거
const obj = {
name : '가길동',
age : 20,
print:
function(message){
console.log(message)
},
addr:'가산동'
}
console.log(obj.name,':',obj.age,':',obj.addr) //가길동 : 20 : 가산동
더 짧아짐(function을 생략한다.)
const obj = {
name : '가길동',
age : 20,
print(message){
console.log(message)
},
addr:'가산동'
}
console.log(obj.name,':',obj.age,':',obj.addr) //가길동 : 20 : 가산동
C.정적메소드
- 정적 메소드는 클래스의 인스턴스화 필요없이 클래스명.메소드로 접근 할 수 있다.
- 외부변수에 영향을 받지 않고 그냥 받은 인자들만 가지고 함수를 정의 (주로 순수함수에 사용됨)
- 메소드 정의시 메소드명앞에 static키워드
-this키워드를 사용할 수 있지만 사용하진 않는다.
다. 오토박싱
- non-strict 모드에서 this 값이 null 혹은 undefined 일 경우 window 객체로 자동으로 변환해 주는 것을 autoboxing이라고 한다.
- 하지만 ES6의 클래스에서는 오토박싱이 일어나지 않는다. 그래서 ES6의 클래스에서 메소드를 변수에 저장하여 사용할 경우 this에 유의해서 사용해야 한다.
이건 person 객체이건 window 객체오토박싱이 안 일어날 땐 바인딩을 하면 되지롱!!
class Person{
walk(){
console.log(this);
return this;
}
static eat(){
console.log(this);
return this;
}
}
var person = new Person();
var walk=person.walk;
walk();//undefined
var walk=person.walk.bind(person);
walk();//person 객체가 됨
var eat=Person.eat;
eat();//undefined
var eat=Person.eat.bind(Person);
eat();// 얘는 객체가 아니고 Person 클래스 자신임!
*** java와는 다르게 자식에서는 반드시 super 혹은 this 키워드로 메소드에 접근해야 한다!!!
