[props] 디스트럭처링, 템플릿 리터럴

<Hard onClick={() => handleLevelChange("hard")} level={level}>
  HARD
</Hard>

const Hard = styled.button`
  ${({ level }) =>
    level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

const Hard = styled.button`
  ${(props) =>
    props.level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

 

---

먼저 코드부터 보자,

 

Hard 컴포넌트는 level이라는 props를 받고 있으며,

styled-components를 활용해 특정 조건에 따라 CSS 스타일을 적용하고 있다.

 

즉, level 값이 "hard"일 때 배경색과 글자색을 변경하도록 설정했다.

 

 

객체 디스트럭처링

 

const character = {
  name: '용',
  level: 250,
};

// 일반적인 방법
console.log(character.name);
console.log(character.level);

// 디스트럭처링 사용
const { name, level } = character;
console.log(name);  // '용'
console.log(level); // 250

 

 

객체 디스트럭처링이란 배열이나 객체의 속성을 해체하여 개별 변수에 할당하는 표현식이다.

 

장점으로 객체에서 원하는 값을 꺼내서 사용할 때, 코드가 더 간결해지고 가독성이 좋아진다.

 

 

 

코드를 다시 보자.

 

---

 

const Hard = styled.button`
  ${({ level }) =>
    level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

 

const Hard = styled.button`
  ${(props) =>
    props.level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

 

 

첫번째 코드는 객체 디스트럽처링으로 

 

level을 바로 참조해서 조건문을 넣어서 css 속성을 적용시킬 수 있다.

두번째 코드는 props를 직접 참조하는 경우이다.

 

즉, 두 개의 코드 모두 똑같은 결과를 실행한다.

 

 

---

템플릿 리터럴

 

const name = '용';
const level = 250;

const message = `${name}의 레벨은 ${level}입니다.`;
console.log(message); 
// 용의 레벨은 250입니다.

 

템플릿 리터럴(Template Literal)은 백틱(``)을 사용하여 문자열을 감싸고,

${} 문법을 활용해 변수를 삽입할 수 있는 기능이다.

 

 

장점으로는 ${} 안에 변수, 수식, 함수, 삼항 연산자를 사용할 수 있다.

 

 

이제 템플릿 리터럴을 알았으니 코드를 다시 보자.

 

---

 

const Hard = styled.button`
  ${({ level }) =>
    level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

 

const Hard = styled.button`
  ${(props) =>
    props.level === "hard" &&
    `background: ${colors.main.dark0}; color: ${colors.main.white0};`}
`;

 

두 개의 코드 전부 백틱 `` 안에 ${} 문법을 이용한다.

 

즉, 템플릿 리터럴 문법을 활용하여 styled-components에서 동적으로 스타일을 적용하는 방식이다.

 

${} 안에서 변수를 사용할 수 있을 뿐만 아니라, 삼항 연산자나 조건문도 활용할 수 있다

 

 

 

 

 

 

의문

 props.level은 왜 props.level로 사용되는가?

 

답변

 

Hard 컴포넌트를 보면 level이라는 props를 전달하고 있다.

<Hard onClick={() => handleLevelChange("hard")} level={level}>
  HARD
</Hard>

비록 props라는 이름이 직접적으로 보이지 않지만, 내부적으로는 다음과 같이 props 객체가 존재한다고 생각하면 된다.

const props = { level: "hard" };

따라서 props.level을 참조할 수 있는 것이다.

 

디스트럭처링을 사용하면?

const { level } = props;

이렇게 구조 분해 할당을 하면 level을 바로 사용할 수 있다.

따라서 첫 번째 코드처럼 { level }을 직접 추출하는 방식이 더 깔끔하고 효율적이다.

 

 

 

마지막으로

디스트럭처링은 흔히 배웠던 구조 분해 할당의 영어 이름이다 ㅎ..