알아두면 좋은 JavaScript 활용법 (해체 표현식, 화살표 함수 등)

JSON의 내부 값을 간편하게 사용하는 법

보통 JSON을 사용하다 보면 이런 상황이 벌어질 수 있다.

const json = { ... 암튼 뭔가 있음 };

return (
    <Button color={json.something.color} variant={json.something.variant}>
    	{json.something.text}
    </Button>
);

이 지저분한 코드를 이렇게 쓸 수도 있다.

const json = { ... 암튼 뭔가 있음 };
const color = json.something.color;
const variant = json.something.variant;
const text = json.something.text;

return (
    <Button color={color} variant={variant}>
    	{text}
    </Button>
);

이 비효율적인 코드를 이렇게 쓸 수도 있다.

const json = { ... 암튼 뭔가 있음 };
const {color, variant, text} = json.something

return (
    <Button color={color} variant={variant}>
    	{text}
    </Button>
);

등호의 왼쪽에는 중괄호를, 오른쪽에는 JSON object를 넣는다.
중괄호 안에는 key를 넣는다. 그러면 JSON object안에 있는 같은 이름의 key를 변수로 사용할 수 있다.

 

 

JSON의 나머지 키를 사용할 때

React를 사용하다보면 이런 상황이 생긴다.

const MyButton = props => {
	const upgradeValue = props.value + 1;

    return (
        <Button {props}>
            금붕어의 일기: {upgradeValue}
        </Button>
    );
};

<MyButton value={5} size="medium" />

다음과 같이 props로 받은 값을 사용해야 하는데, 나머지 props를 Button에 적용시켜야 하는 상황이다.
이럴때는 이렇게 사용할 수 있다.

const MyButton = props => {
    const { value, ...etc } = props;
    const upgradeValue = value + 1;

    return (
        <Button {...etc}>
            금붕어의 일기: {upgradeValue}
        </Button>
    );
};

<MyButton value={5} size="medium" />

위와 같이 value를 제외한 나머지 값들을 ...etc로 처리하였다.
etc뿐만 아니라 ...extra, ...something등 아무거나 가능하다.
또한, 이 etc는 단독으로 사용하면 json이 된다.

console.log(etc);
console.log({ ...etc });

 

 

JSON값을 생성할 때

다음과 같은 상황이 있다.

const type = "value";
const name = "goldfishdiary";

const returnJSON = {
    type: type,
    id: type + "-b",
    name: name,
};

이렇게 JSON에 들어갈 key의 이름과 value의 변수이름이 같다면, 다음과 같이 쓸 수 있다.

const type = "value";
const name = "goldfishdiary";

const returnJSON = {
    type,
    id: type + "-b",
    name,
};

 

보다시피 생략이 가능하고, ':를 쓰는 key'와 '안 쓰는 key'를 같이 쓸 수 있다.

 

 

화살표 함수의 활용

React를 사용하다보면 .map함수를 사용할 때가 많다. 다음과 같은 상황을 생각해보자.

list.map((item) => {
    return (<div>a</div>);
});

위의 코드는 이럴게 쓸 수 있다.

list.map((item) => (
    <div>a</div>
));
// 또는
list.map(item => (
    <div>a</div>
));

함수 내부에 반환하는 코드밖에 없다면, 중괄호와 return문을 제거할 수 있다.
또한 인자가 하나밖에 없다면, 인자를 감싸는 괄호도 생략할 수 있다.

 

이를 한 단계 업그레이드하면 이런 방법도 가능하다.

list.map(({ value, text, ...etc }) => (
    <Button {...etc}> {text + value} </Button>
));

인자가 JSON이라면, 중괄호 형태로 풀어서 코드를 구성할 수도 있다.
단, 중괄호 형태로 풀어서 쓸 때는 인자를 괄호로 감싸야한다.

 

 

문자열과 변수를 합쳐서 새로운 문자열을 만들고 싶을 때

코딩을 하다보면 이런 일이 생긴다.

<Button key={"button-test-" + value} />

이런 문자열 + 변수 조합을 이렇게 쓸 수 있다.

<Button key={`button-test-${value}`} />

따옴표대신 키보드 1 왼쪽에 있는 기호를 쓴 다음, 변수부분을 ${...}로 감싸면 된다.