[react] DeepDive 1 +[JS]

export와 import하는 법

특정 변수를 내보낼 때

<index.js>

export default 변수명;

- 가져다 쓸 때

import 작명 from '/index.js';

여러개를 내보낼 때

<index.js>

export let a = 10;
export {b, c};

 

- 가져다 쓸 때

import {a, b, c} from './index.js';

🚨 여러개를 보낼 때는 { 중괄호 }로 감싸주어야 하고, 가져올 때 변수명을 내보낸 그대로 가져와야 함!!

대량의 변수들을 보낼 때  : *

<index.js>

import * as user from "./index.js";

console.log(user.name)

 

const

재할당 불가능 ( let은 재할당 가능)

const

=> 변수를 바꿀 수는 없지만 배열은 조작가능

 

함수

function good() {
	console.log("hi");
}

호출은 good();

 

화살표 함수

function() {
	console.log("hi");
}

 

매개변수가 하나일 경우 소괄호 생략가능!

1. (userName) => { ... }

1. userName => { ... }

const user = {
	name : "nana",
    age : 29,
    greet(){
    	console.log("hi");
        console.log(this.age) //this를 사용하여 객체안의 프로퍼티 액세스 가능
    };
};

console.log(user.greet())

 

분해 문법 (디스트럭처링)

배열일 경우

const [firstName, lastName] = ["merry", " christmas"]

객체일 경우 (프로퍼티, 프로퍼티값) => 키와 값으로 정의 해주어야 함

const {firstName: userName, lastName} = {
	firstName : "merry",
    lastName : "christmas"
}

전개연산자 ( 스프레드 연산자)

배열의 값을 가져와서 새 배열에 추가를 해주는 방법이다

const cafe = [...coffee, ...cookie]
console.log(cafe)

 

리액트

dom을 직접  querySelector등으로 조작할 필요없음

=> 선언형으로 작성하기 때문

 

함수안에 함수를 전달해줄 때는 소괄호를 쓰지 않음

setTimeout(timeout()); // => 함수 자체를 전달해야하기 때문에!!

setTimeout(timeout, 2000); // 함수자체를 전달하는 방법
setTimeout(() => {         // 화살표함수로 전달하는 방법
}, 4000);

 

함수안의 함수선언

function info() {
	function greet() {
    	console.log("hi");
      	}
    greet();
}

// hi

greet(); 
// error
// => 함수 안에서 정의해주었기 때문에 함수 밖에서 실행할수 없음

 

let, const 등등 자세히 알아보기

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const