// bad
const items = new Array();
// good
const items = [];
▽ 4.2 아이템을 배열에 추가하는 경우, 직접 배열에 항목을 대입하지 말고Array#push를 이용한다.
const someStack = [];
// bad
someStack[someStack.length] = "abracadabra";
// good
someStack.push("abracadabra");
▽ 4.3 배열을 복사할 때는 배열의 spread 연산자...를 이용한다.
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
Airbnb 4.4 ~ 4.7
4.4 반복 가능한 객체를 배열로 변환 시,Array.from보다 spread...의 사용을 권장합니다.
4.5Array.from은 배열과 같은 객체를 배열로 변환하는 데 사용합니다.
4.6 spread...대신Array.from을 사용하면 중간배열이 생성되지 않아 반복 가능한 항목에 매핑할 수 있습니다.
4.7 배열 메서드 콜백에서 반환문을 사용합니다. 함수 본문이 단일문으로 구성된 경우 반환을 생략해도 됩니다.
// bad
const item = new Object();
// good
const item = {};
: 객체는new object(),Object.create(),literal표기법을 사용해 초기화할 수 있습니다. 여기서는 리터럴 표기법을 사용합니다.
▽ 3.2 동적 프로퍼티명을 갖는 오브젝트를 작성할 때, 계산된 프로퍼티명(computed property names)을 이용한다.
function getKey(k) {
return `key named ${k}`;
}
// bad
const obj = {
id: 5,
name: "San Francisco",
};
obj[getKey("enabled")] = true;
// good
const obj = {
id: 5,
name: "San Francisco",
［getKey("enabled")]: true
};
: 계산된 프로퍼티명은 JS Object의 프로퍼티 이름을 동적으로 설정할 수 있게 만들어주는 ES6의 기능입니다. 유효한 값을 반환하는 변수나 함수를 [대괄호] 안에 작성하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다. 위 예시와 같이 변수 뿐 아니라 함수를 대괄호에 작성해 객체 프로퍼티를 추가할 수 있습니다. 이런 방식을 사용한다면 Object의 모든 프로퍼티를 한 블록 내에서 정의할 수 있습니다.
▽ 3.3 메서드의 단축구문을 사용한다.
// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
: 메서드 단축구문 또한 ES6에 도입되었습니다. 객체 초기자(initializer)에 메서드 정의를 위한 단축구문입니다.function은 메서드 정의에서 더 이상 필요없게 되었습니다.
: 속성의 단축구문을 시작구문에 그룹화하면, 어떤 프로퍼티가 단축구문을 이용하고 있는지 알기 편합니다.
(Airbnb와 다른 부분 시작)
▽ 3.6속성명이 키워드(default, if, ...)일 경우에는 꼭 따옴표를 붙인다. 또한, -문자와 같이 속성명으로 지정할수 없는 경우에는 꼭 따옴표를 붙인다.
// bad
const bad = {
foo: 3,
default: 20,
data-blah: 5
};
// good
const good = {
foo: 3,
"default": 20,
"data-blah": 5,
10: "naver"
};
▽ 3.7hasOwnProperty, propertyIsEnumerable, isPrototypeOf 와 같은 Object.prototype 메서드를 직접적으로 사용하지 않는다.
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from "has";
// ...
console.log(has.call(object, key));
: JS에서 객체를 상속하기 위해 프로토타입 방식을 사용합니다. 한편, hasOwnProperty, propertyIsEnumerable, isPrototypeOf와 같은 builtin 메서드는 객체에서 직접호출하거나 Object.prototype을 사용해 호출합니다. 3.7 항목은Object.prototype를 사용해 호출할 때 직접적인 사용을 지양하도록 합니다. 직접적으로 사용할 경우 발생될 문제점은 다음과 같습니다.
변수와 { 중괄호 }를 이용해 자료를 잠깐 저장해서 불러왔습니다. css는 참조만 해주세요.
오늘은 React의 꽃이라 불리는 State에 대해 알아보겠습니다.
useState를 대체 왜 써요?
state : 리액트 컴포넌트의 변경 가능한 데이터를 표현하는 자바스크립트 객체
state는 짱 좋습니다. state를 수정하면 자동으로 html에 반영되는 성질을 가지고 있기 때문이죠.
React에서 data를 잠깐 저장하는 방법
(복습과 같이) 변수에 저장한다.
state에 저장한다.
변수에 저장해도 될텐데 왜 굳이 state에 data를 저장하는 걸까요? 이는 웹이 App처럼 동작하게 하기 위해서입니다. 변수에 data를 저장한다면, 데이터가 바뀌면 새로고침을 눌러줘야 HTML의 재렌더링(re-rendering)이 진행되어 데이터 값이 수정됩니다. 하지만 state를 사용한다면 데이터가 바뀔 때 HTML이 자동으로 재렌더됩니다. 다음을 보시죠.
import { useState } from 'react';
import './App.css';
function App() {
let [photo, setPhoto] = useState(['PhotoCard_01', 'PhotoCard_02']); //state에 Number, Array, Object 등 갖가지 것들을 저장할 수 있습니다.
let [good, setGood] = useState(0);
//click 시 실행할 함수, good + 1 을 리턴하는 것이 아니라 setGood(good + 1)을 리턴합니다. state를 직접적으로 수정이 불가하기 때문입니다.
let ifClick = () => {
setGood(good + 1);
}
return (
<div className="App">
<div className="datastyle">
{ photo[0] }
</div>
<span>좋아요: { good } 개 </span>
<button onClick={ifClick}>좋아요</button>
</div>
);
}
export default App;
△ 인스타그램 '좋아요' 기능과 같이 버튼을 누르면 좋아요 갯수가 1씩 증가하는 state 사용해 보았습니다.
△ 다음과 같이 동작하며, 좋아요를 누르면 state의 상태만 변화하고, 새로고침 시 좋아요 갯수는 초기화됩니다.
state의 형식
{useState}를 React로부터 import한다.
import {useState} from 'react';
변수 선언을 해야하며, 초기값이 필요하다.
let [변수명1, 변수명2] = useState(초기값);
※ 변수명1 : state에 보관한 자료
※ 변수명2 : state 변경을 도와주는 함수
이처럼 자주 변경되는 html은 state로 만들어 데이터바인딩하면 되겠습니다.
이런 상태를 관리해주는 React의 컴포넌트는 useState뿐일까요? 그렇지 않습니다. useEffect, useCallback 등 다양한 함수들이 있습니다. 이런 함수형 컴포넌트들의 집합을 Hooks(훅)이라고 합니다. 이제 Hooks에 대해 조금 더 알아봅시다.
Hooks는 React 16.8버전 이후 추가된 기능입니다. Hook은 기존의 함수형 컴포넌트가 할 수 없었던 다양한 기능(특히 정보를 잠깐 저장하고 업데이트 하는 것)을 할 수 있게 만들어줍니다.
Hook이 등장하기 전에는 상태를 관리하기 위한 Class형 컴포넌트가 필요했습니다. 그러나 Class형 컴포넌트는 다음과 같이 몇 가지 단점이 있었습니다.
여러 컴포넌트 사이에 상태를 관리하기 위한 로직을 재사용하기 어려웠습니다.
상태와 관련된 로직이 모두 같은 공간에 있어, 복잡한 컴포넌트는 이해하기 어려웠습니다.
JavaScript Class의 'this' 를 이해하기 어려웠습니다.
Hook을 통해 React는 계층변화 없이 상태관련 로직을 재사용하고, 작은 함수로 컴포넌트를 나눠 Class의 사용을 최소화할 수 있었습니다. 상대적으로 어려운 Class를 사용할 필요 없이 모듈로 활용할 수 있다는 점이 Hook의 장점이라고 볼 수 있습니다.
Hook은 다음과 같은 규칙을 따릅니다.
같은 Hook을 여러 번 호출할 수 있습니다.
반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하는 것을 지양해야 합니다.(버그가 생겨서 그러지 실행은 되긴 함)
JS함수가 아닌 React함수 내에서 호출해야 합니다.
특히 두번째 규칙의 부가설명) React Hook은 호출되는 순서에 의존하기 때문에, 조건문이 만약 false라서 해당 부분을 건너뛰면 순서가 밀려서 버그가 생깁니다. true인 경우에는 실행이 되기 때문에 해도 괜찮다고 생각이 들 수도 있지만, 하지 말라고 하지 않는 것이...!
먼저, 다른 음악인의 홈페이지를 참고하고 싶어 서칭해봤는데 정말 아예 없다싶을 정도로 없더군요. 우리나라에서 음악을 하는 수많은 사람들이 의외로 자기만의 홈페이지를 만드는 데에 관심없다는 생각이 들었습니다. 그도 그럴 것이 인스타나 페이스북 같은 SNS나 Youtube를 통해 훨씬 편하고 폭넓게 홍보할 수 있는 수단이 있었죠. 하지만 SNS나 Youtube는 한 눈에 정보를 알아보기 어렵고, 찾아보기 은근히 귀찮다는 단점이 있습니다. 그래서 제 공부도 할 겸 만들어보기로 했습니다.
9/13 ~ 10/20 약 5주에 걸쳐 Seulgi ver 1.0을 완성해 배포했습니다. 배포라고 하기엔 github를 통해 호스팅을 한 것이고, 빠르게 만들고 싶어 BootStrap5를 이용했습니다.
첫 결과물 치고 은근히 만족했습니다만,, 보면 볼수록 뭔가 나사빠진 부분이나 수정하고 싶은 부분이 봇물처럼 터져나오더라구요. 그리고 BootStrap은 물론 좋은 라이브러리입니다만 많은 제약이 있고, template를 이용했기에 수정하고 싶은 부분 중 아예 갈아엎어야 되는 부분도 더러 있습니다. 물론 나중에 Vue나 React를 공부하며 완전히 갈아엎어볼 예정입니다.
이 Project 카테고리에서는 창작물을 어떻게 수정하고싶은지 생각해보며 직접 고치는 작업을 업로드할 예정입니다.
부트스트랩을 적어놨지만 수정할 부분에서 부트스트랩의 비중보다 HTML,JS,CSS의 비중이 높을지도 모르겠네요..!
To illustrate destructuring, we'll make a sandwich. Do you take everything out of the refrigerator to make your sandwich? No, you only take out the items you would like to use on your sandwich.
Destructuring is exactly the same. We may have an array or object that we are working with, but we only need some of the items contained in these.
Destructuring makes it easy to extract only what is needed.
샌드위치 만들 때 냉장고에 있는 물건 전부다 빼내지 않죠? 샌드위치 만드는 데 필요한 것들만 꺼낼거에요.
Destructuring도 이와 비슷합니다. 배열이나 객체 중 필요한 부분만 잘라낼 수 있습니다.
Destructuring Arrays
Destructuring : 구조화된 객체, 배열 따위 요소를 비구조화(Destructure)하여 변수에 할당하다.
우리는 이번 시간에 배열의 Destructuring에 대해 중점적으로 알아보도록 하겠습니다. 먼저 2015년 ES6 전의 Destructuring 문법에 대해 간략히 알아보겠습니다.
▽ ES5 Destructuring Arrays
var arr = [a, b, c];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three);
#결과
a b c
이렇게 ES5 문법으로는 Array의 각 요소를 변수에 하나씩 할당해야 했습니다. 여간 귀찮은 일이 아니었죠.
그래서 ES6에는 다음과 같은 수학 공식을 문법에 추가했습니다.
△ 수학 배열의 동치구조입니다. 수학과 미묘하게 다른 점이 하나 있다면, 추출&할당이 Array의 index 기준으로 진행된다는 것입다. 우측의 배열의 인덱스 기준으로 좌측 변수에 할당된다는 것입니다. (변수할당의 특성상 원래 그렇긴 하죠.)
이 문법 하나만으로 ES5와 다르게 얼마나 빠르게 Destructuring이 가능한 지 다음에서 볼 수 있습니다.
React를 사용하기 위해서는 JSX를 알아야합니다. 또한 React를 사용하는 가장 큰 이유는 데이터바인딩(DataBinding)이죠.
React라는 라이브러리를 사용하기 위해 공부해야되는 것이 많다고 느껴지겠지만, 사실 이 두가지는 별 것 없습니다. JSX에 대해 먼저 알아봅시다.
JSX
JSX : A syntax extension to JavaScript. 자바스크립트 확장 문법.
JSX는 JS의 확장문법으로, XML/HTML + JS라고 생각하면 됩니다.
다음은 저번 시간에 만든 App.js입니다. index.js가 App.js에 있는 함수 리턴값을 public에 있는 index.html로 옮겨줍니다.
분명 App.js이라고 되어있는 걸로 보아 JS파일이고 분명 JS에서 사용하는 함수선언인데 너무나 HTML스러운 부분이 있죠. 바로 이 함수 속 HTML 노란박스 부분(함수 리턴값)이 JSX로 쓰였습니다. html의 태그 <div>, <img>, <p> 등을 사용해 겉보기는 비슷해보이지만 다음과 같은 속성을 가지고 있습니다.
(많은 속성이 있지만 공부하는 데 필요한 부분만 적었습니다.)
→ JSX의 속성
JSX로 작성된 코드는 전부 JS 코드로 변환된다.
리액트는 JSX 코드를 모두 createElement() 함수 코드로 변환한다.
Dom 요소에 class를 넣기 위해서는 className을 쓴다. (프로퍼티 명명법 사용)
{ 중괄호 }를 사용하면 무조건 자바스크립트 코드가 들어간다.
JSX를 사용하며 우리가 얻을 수 있는 이득은 코드의 간결함과 가독성 향상입니다. JSX를 사용하는 법은 천천히 함께 공부해보며 알아봅시다.
데이터 바인딩(Data Binding)
데이터 바인딩 : HTML에 원하는 DATA를 나타내는(일치화하는) 것.
리액트를 사용하는 큰 이유로 데이터바인딩이 쉽다는 것이 있죠. 데이터 바인딩이란 개발자가JS 코드로 선언하고 반환한 데이터를 HTML에서도 동일하게 보이게 만드는 것을 의미합니다.
