[React] 자바스크립트 import, 함수, 객체와 클래스

import and export

 

export 방법 2가지.

util.js에서 export하고

app.js에서 import한다고 가정.

 

1) 변수생성&이름할당하며 export 

 export let apikey= "adfsfe2qw2dd";

=> 몇개든 상관없이 export 가능.

import {apiKey} from "./util.js";

 

2) default export

export default "adfsfe2qw2dd";

 변수 생성하거나 이름 할당하지 않고 이름 없는 값을 export

 

=> 2번째 방법은 하나더 추가하려고 하면 오류.

파일별로 하나의 값만 default export 가능.

import apikey from "./util.js";
//import 파일에서 원하는 이름 할당하면 됨. export시에 이름을 정하지 않았으니

 

- *로 다 묶어버리면 util.js가 제공하는 모든 대상이 이 객체에 결합됨.

import {apiKey, abc} from "./util.js";

import * as util from "./util.js";
//as 다음에 오는 이름(여기서는 util)은 임의로 정하면 됨

이 경우 console.log(util. ~~~); 식으로 .으로 접근하면 됨

util.apiKey 이런 식으로. 

 

- alis(별칭) 지정 방법

import {apiKey, abc as content{ from "./util.js";

 

연산

console.log(10===10) //true

 

함수

//정의
function greet(){
	console.log('Hello!');
}

greet(); //함수 호출

>>> Hello!

 

//정의
function greetUser(userName, message){
	console.log(userName);
    console.log(message);
}

greetUser("Lily", "Hello!"); //함수 호출
greetUser("Cindy", "Nice to meet you!"); //함수 호출

//정의
function greetUser(userName, message="Hello!" ){
	console.log(userName);
    console.log(message);
}

greetUser("Lily"); //함수 호출
greetUser("Cindy", "Nice to meet you!"); //함수 호출, 기본 메시지는 overwrite된다

 

function 정의할 때

return "Hi, I am"+ userName+ "." + message; 이런 식도 가능.

 

화살표 함수

export default function(){
	console.log('Hello');
}

//또는

export default(userName, message) => { //arrow function
	console.log('Hello');
    return userName+message;
}

 

객체와 클래스

//객체 생성
const user={
	name: "Lily",
    age:22

	greet(){
    	console.log("Nice to meet you!");
        console.log(this.age);
    }
};

console.log(user.name);
user.greet();

user.name 식으로 접근

 

//클래스
class User{ //클래스 이름은 대문자로 시작해야함!!
	constructor(name, age){
    	this.name= name;
        this.age=age; 
    }
    
	greet(){
    	console.log('Hi!');
    }

}

const user1= new User("Manuel", 35);
console.log(user1); //사용방법
user1.greet(); //Hi 출력