9월 다섯째 주는 대부분 팀원들과 함께 진득하게 의자에 앉아서 자바스크립트로 알고리즘 문제를 풀어보며 시간을 보냈다. 이번 한달 동안 뇌를 가장 많이 썼고 배가 제일 빠른속도로 꺼졌던 주가 아닐까 예상해본다. 도대체 왜 자바스크립트를 제대로 지원해주지 않는건지 이해할 수 없는 백준 사이트를 뒤로하고 '프로그래머스' 라는 사이트에서 시작했다.
9월의 마지막부터 현재까지는 리액트를 입문해서 조금 공부해봤다. 내가 파악한 리액트의 핵심은 재사용가능한 작은 단위인 컴포넌트들로 이루어져 있다는것과, 해당 컴포넌트에 업데이트가 있으면 렌더함수가 호출되어서 렌더링 된다는 점이다. 다음에 리액트를 따로 정리해서 다뤄보는 시간을 가지면 좋을 것 같다.
다시 만난 ECMAscript !!
이전에 '자바스크립트의 역사' 라는 글을 작성해보면서 한번 접해본 친숙한 이름이다. 이번에는 리액트를 공부해보면서 필요한 자바스크립트 문법의 특징 때문에 필연적으로 다시 만나게 된 친구다. 이 친구의 등장 배경에 대한 이야기는 이전 글에서 다뤄봤기 때문에 넘어가고 소개를 잠깐 해보자면..
ECMAScript란 브라우저에서 동작하는 언어를 만들 때 엔진이 이해할 수 있도록 변수를 만드는 방법이나 함수 정의하는 방법 등을 정리한 문서이다
ECMAscript (이하 ES) 이름 앞의 ECMA는 국제 표준안 기구 ECMA International 의 이름에서 따온 것이다. 1997년 7월 첫번째 ES1 이후로 현재는 많은 ES 버전들이 나와있는 상태지만 역시 가장 임팩트있는 변화는 언제였는지 꼽는다면 무료 6년의 공백기간을 두고 나온 ES5에서 ES6로의 변화가 아닐까 싶다. 특히 리액트에서 중요한 많은 자바스크립트의 개념들이 ES6에서 탄생했기 때문에 더욱 중요하다.
ES5 => ES6 그래서 뭐가 다른데?
두 버전사이에 그렇게 파격적인 변화가 있었다면 변경의 세부사항은 둘째치고 추가된 친구들의 이름만 들어도 느낌이 확 오겠지? 하는 생각을 가지고 찾아봤는데 정말이었다.
var? NO. let-const? YES!
ES6 이전 재할당이 가능했던 악명높은 var 키워드를 레거시 코드 역사의 뒤안길로 던져버린 let과 const가 등장했다. 변수가 선언된 키워드만 보아도 변수의 변화가 예상되는 사소해 보이지만 아주 중요한 변화다.
너무 편한 화살표 함수
화살표 함수 (Arrow function) 이 추가되어서 함수를 간결하게 표현할 수 있게 되었다. 이것은 익명함수를 작성할 때 사용할 수 있으므로 특히 콜백함수를 전달할때 마다 복잡하게 코드를 작성하지 않아도 되게 만들어 준다. 심지어 매개변수를 하나만 받는다면 ()를 생략할 수 있고, 리턴 문 하나로 정의 된다면 {}와 return 도 생략이 가능하다는 어마무시한 사실! 하지만 기존의 함수들과는 다르게 렉시컬 this 규칙을 따르기 때문에 기존의 다른 함수들과는 this 바인딩에 있어서 차이점이 있다고 한다.
대망의 클래스
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어가 되었다. 기존 생성자 함수와 같은 친구들의 존재로 굳이 없어도 되지만 있으면 편한 Syntactic sugar 라고도 볼 수 있다. 이 친구가 없었다면 리액트가 리액트 훅과 같이 나왔을까?
구조분해 할당
자료구조를 분해해서 반대 항에 있는 변수에 각각 할당해주는 동작을 해준다. 함께 추가된 spread 연산자 등과 같이 사용한다면 가독성과 성능이 더 좋은 코드를 작성할 수 있겠다. 나의 경험 상, 리액트에서는 state 상태를 업데이트 해주기 위해 새로운 객체를 생성하는 상황에서 사용되는 경우가 많았다.
이런 친구들도 있더라
함수 매개변수에 초기 값을 설정해주는 Deafault parameter.
Back tic을 사용한 문자열 리터럴.
무분별한 콜백사용으로 빠져버린 콜백지옥에서의 탈출을 위한 프로미스.
느낀점
알고리즘을 푸는 단계에서 자바스크립트 문법을 어느정도 다져놓아서 그런지 리액트를 공부하면서 자바스크립트 문법에서는 무너지지 않았던것 같다. 하지만 리액트만의 컴포넌트 구성 방법. state를 다루는것에 있어서 암묵적인? 규칙 또 그에 대한 이유 등 나를 헷갈리게 하는 요소가 대거로 등장했다. 역시 직접 손코딩 해보면서 느낌을 알아가는게 중요한것같다.
