[초보를 위한 React] 1일차

목표

• ✍️ #1.0 ~ #1.5 강의 듣기, 코드 챌린지 하기
• 느낀점 및 정리

강좌

• nomadcoders [멤버십] 초보를 위한 React JS
• 강좌 링크 : https://nomadcoders.co/react-for-beginners/lectures/495

강의 요약

자바스크립트 (ES6)에서 유용한 기능들에 대해 알아보자

1. arrow function(화살표 함수) : return을 생략 가능

// 일반 함수 
function sayhello(name) {
   return 'hello'+ name
}
// 화살표 함수
// 아래와 같이 return 을 생략 가능 
sayhello = (name) => 'hello'+ name;

// 중괄호가 있는 경우에는 return이 있어야함
sayhello = (name) => { 'hello'+ name } ;

// 중괄호는 객체를 의미할때도 있기에 객체를 반환 할 때는 괄호를 넣어줌
sayhello = (name) => ({ name : 'sonia' }) 

2. template literals(탬플릿 리터럴) : 정말 많이쓰는 기능

 function sayhello(name) {
    return `hello ${name}`
 }

3. object destructuring(구조 분해 할당)

let user = {
   name : "changsun",
   nickName : "sonia",
   type : "human",
   age : "999"
}

// 일반적인 경우 
function (user){
   const name = user.name;
   const nickName = user.nickName;
   const type = user.type;

   console.log(name,nickName,type)
}

// 구조 분해 할당 사용한 경우
function (user){
   const {name, nickName, type} = user;
   console.log(name,nickName,type)
}

4. spread operator(펼침 연산자)

function objectMarge(a,b){
   return {...a, ...b};
}

5. classes

class util{
   // 정적 메서드 - 클래스에서 바로 참조 가능 
   static objectMarge = (a,b) => ({...a, ...b})
}
let a = {name : 'a'};
let b = {test : 'b'};
util.objectMarge(a,b);

결론

• 대부분 알고 있는 내용이였지만, 다시 정리하는 느낌으로 진행
• class에서 static(정적 메소드)가 class의 instance없이 호출 가능한점임을 알았다.