React

React STEP 9 - EcmaScript6 문법 - 2

2025. 2. 7. 14:05
728x90

⭐ EcmaScript6

 

1. 전개 연산자(...) 사용하기

  • 전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다.
  • 변수 앞에 마침표 3개(...)를 입력해 사용합니다.
class SpreadOperator extends React.Component {
  componentDidMount() {
    //javaScript Array
    var varArray1=["num1", "num2"];
    var varArray2=["num3", "num4"];

    var sumVarArray=[];
    sumVarArray=sumVarArray.concat(varArray1, varArray2);
    console.log("1. sumVarArray : "+sumVarArray);

    //ES6 Array
    let sumLetArray=[varArray1, varArray2];
    console.log("2. sumLetArray : "+sumLetArray);

    let letArray=["num1", "num2", "num3", "num4"];
    let [sum1, sum2, ...remain]=letArray;
    console.log("3. sum1 : "+sum1+", sum2 : "+sum2+", remain : "+remain)

    // JavaScript Object
    var varObj1={key1: "var1", key2: "var2"};
    var varObj2={key2: "new2", key3: "var3"};
    var sumVarObj={};

    sumVarObj=Object.assign(sumVarObj, varObj1, varObj2);
    // console.log("4. sumVarObj : "+sumVarObj);
    console.log("4. sumVarObj : "+JSON.stringify(sumVarObj));

    // ES6 Object
    let sumLetObj={...varObj1, ...varObj2};
    console.log("5. sumLetObj : "+JSON.stringify(sumLetObj));

    let {key1, key3, ...others}=sumLetObj;
    console.log("6. key1 : "+key1+", key3 : "+key3+", others : "+JSON.stringify(others));
  }

  render() {
    let h2Style={
        fontSize: 16,
        fontWeight: "normal"
    };
    return(
        <h2 style={h2Style}>This is Spread Operator.</h2>
    );
  }
}

class App2 extends React.Component {
  render(){
      let h1Style={
          fontWeight: "normal"
      };
      return(
          <div>
              <h1 style={h1Style}>React Example</h1>
              <SpreadOperator />
          </div>
      );
  }
}

root.render(
  <App2></App2>
)
  • 해석
 // var sumVarArray=[varArray1[0], varArray1[1], varArray2[0], varArray2[1]];
 var sumVarArray=[];
 sumVarArray=sumVarArray.concat(varArray1, varArray2);
기존 ES5에서 배열 2개를 합치기 위해서는 배열 각각의 인덱스로 접근해 값을 가져오거나 concat() 
메서드를 이용합니다.
 varArray1, varArray2 배열에 각각 인덱스(0, 1)로 접근해 인자값(num1, num2, num3, num4)을 가져와 
새로운 배열 sumVarArray에 하나씩 넣습니다.

 let sumLetArray=[varArray1, varArray2];
 ES6에서는 대괄호([])를 이용해 여러 개의 배열을 합칠 수 있습니다.
 
 const [sum1, sum2, ...remain]=letArray;
 letArray 배열의 값을 추출해 개별 변수에 넣습니다. 순서대로 변수 sum1에 letArray[0] 값, 변수 
sum2에 letArray[1] 값을 대입합니다. 나머지 배열 값은 마지막 전개 연산자 처리가 된 ...remain 
변수에 배열 형식으로 넣습니다.

 var sumVarObj=Object.assign({}, varObj1, varObj2);
기존 ES5에서는 객체 2개를 합치기 위해서는 Object.assign() 함수를 이용해야 합니다. 첫 번째 인자 
{}는 함수의 return 값이고 뒤의 인자의 객체들은 ,(콤마)로 연결해 나열하면 여러 개의 객체를 합칠 수 
있습니다.

let sumLetObj={...varObj1, ...varObj2};
 ES6에서는 ...(마침표 3개)을 객체명 앞에 붙여 여러 개의 객체를 합칠 수 있습니다.
 
 const {key1, key3, ...others}=sumLetObj;
 sumLetObj 객체의 키와 값을 추출해 키와 동일한 명칭의 개별 변수에 넣습니다. 나머지는 전개 
연산자 처리된 ...others 변수에 객체 형식으로 넣습니다

 

2. 화살표 함수 사용하기

  • ES6에서의 화살표 함수는 function 대신 => 문자열을 사용하며, return 문자열을 생략할 수 도 있습니다.
 class ArrowFunction extends React.Component {
    constructor(props){
        super(props);
        this.state={
            arrowLabel: "React 18.2.0",
            num: 4
        };
    }
    componentDidMount(){
        function myFn1(num1){
            console.log(num1+". ES5 Function");
        }
        let myFn2= num1 => {
            console.log(num1+". Arrow Function");
        };
        
        myFn1(1);
        myFn2(2);
        this.myFn3(1, 2);
        this.myFn4();
        this.myFn5();
        this.myFn6(1, 2, 3);
    }
    myFn3=(num1, num2) => {
        let num3=num1+num2;
        console.log(num3+". Arrow Function : "+this.state.arrowLabel);
    };
    myFn4(){
        var this_bind=this;
        setTimeout(function(){
            console.log(this_bind.state.num+". ES5 Callback Function No Bind");
            // console.log(this.state.arrowLabel);
        }, 100);
    }
    myFn5(){
        setTimeout(function(){
            console.log("5. ES5 Callback Function Bind : "+this.state.arrowLabel);
        }.bind(this), 100);
    }
    myFn6=(num1, num2, num3) => {
        let num4=num1+num2+num3;
        setTimeout(() => {
            console.log(num4+". Arrow Callback Function : "+this.state.arrowLabel);
        }, 100);
    };
    render(){
        let h2Style={
            fontSize: 16,
            fontWeight: "normal"
        };
        return(
            <h2 style={h2Style}>This is Arrow Function.</h2>
        );
    }
 }
 class App extends React.Component {
    render(){
        let h1Style={
            fontWeight: "normal"
        }
        return(
            <div>
                <h1 style={h1Style}>React Example</h1>
                <ArrowFunction />
            </div>
        );
    }
 }
 const root=ReactDOM.createRoot(document.getElementById("root"));
 root.render(
    <App />
 );
  • 해석
 myFn1(1);
 myFn2(2);
 this.myFn3(1, 2);
 this.myFn4();
 this.myFn5();
 this.myFn6(1, 2, 3);
 myFn1 ~ myFn6까지의 함수를 순서대로 호출합니다.
 
 function myFn1(num1){
함수를 호출할 때 전달받은 num1이라는 변수를 함수 내부에서 사용할 수 있습니다

 line026 : myFn3 = (num1, num2) => {
함수를 function 키워드 대신 =>로 선언했습니다. 함수 내에서 사용하는 this는 컴포넌트인데, this로 
컴포넌트의 state에 접근해 사용할 수 있습니다.

 myFn4() {
 var this_bind=this;
콜백 함수 내부에서는 컴포넌트에 this로 접근할 수 없기 때문에 접근할 수 있는 변수에 this를 
백업합니다. 백업된 변수는 this_bind를 이용해 컴포넌트의 state 변수에 접근할 수 있습니다.

 // console.log(this.state.arrowLabel);
콜백 함수 내부에서 this는 window 객체이기 때문에 this로 state 변수에 접근하면 undefined 에러가 
발생합니다.

 }.bind(this), 100);
 bind() 함수로 this를 지정해주면, this를 컴포넌트로 사용할 수 있습니다.
 
 myFn6 = (num1, num2, num3) => {
화살표 함수에서는 this를 bind() 함수로 this를 지정해주지 않아도, this를 컴포넌트로 사용해 state에 
접근할 수 있습니다
728x90
저작자표시 비영리 변경금지 (새창열림)

'React' 카테고리의 다른 글

React STEP 11 - props의 사용 - 1  (2) 2025.02.07
React STEP 10 - EcmaScript6 문법 - 3  (0) 2025.02.07
React STEP 8 - EcmaScript6 문법 - 1  (1) 2025.02.07
React STEP 7 - 생명주기 함수  (0) 2025.02.06
React STEP 6 - 컴포넌트 이해  (0) 2025.02.06
'React' 카테고리의 다른 글
  • React STEP 11 - props의 사용 - 1
  • React STEP 10 - EcmaScript6 문법 - 3
  • React STEP 8 - EcmaScript6 문법 - 1
  • React STEP 7 - 생명주기 함수
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • IT자격증공부
  • 정보처리기사필기
  • jquery
  • 백준
  • 앱개발자
  • 자바
  • css
  • 웹개발
  • 알고리즘
  • 개발자
  • 코딩테스트
  • 프론트엔드
  • 정보보안전문가
  • JavaScript
  • 웹개발자
  • java
  • jsp
  • html
  • 정보처리기사
  • ajax
  • DBA
  • React
  • 개발블로그
  • 데이터베이스
  • IT자격증
  • 백엔드
  • DB
  • it
  • 웹페이지
  • IT개발자

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
React STEP 9 - EcmaScript6 문법 - 2
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.