# 고난이도 예제

## 1. 특징 

* React를 사용하지 않았지만 마치 React를 사용한 것 처럼 DOM을 만들고  render() 메서드를 등을 사용한다. 이는 React가 아닌 순수한 JS를 사용한 예제이다. 
* 커링 함수, 고차 함수를 사용해서 함수형 프로그래밍으로 작성한 예제이다. 

## 2. 예제 

{% embed url="<https://codepen.io/hanna244/pen/MWbbdEV>" %}

## 3. 기억하기&#x20;

사실 쉬운 예제는 아니지만 언젠가는 저런 코드를 짤 수 있는 개발자가 되로록 열심히 연습해야 한다.&#x20;

위의 예제에서 지금 당장 사용해 볼 수 있으며 기억해야할 코드가 아래의 코드이다.&#x20;

```javascript
buttonNode.classList[this.state.isToggled ? "add" : "remove"]("toggled");
```

위의 코드를 다시 풀어서 작성해보면 이렇다.&#x20;

```javascript
if(this.state.isToggled) {
    buttonNode.classList.add('toggled')
} else {
    buttonNode.classList.remove('toggled')
}
```

특징

* `add`, `remove`를 전달 할 때 문자열로 전달한다는 것이다. → 객체의 아이템에 접근할 때, `a[b] (계산된 속성)`, `a["b"]` 이 두 방식으로도 접근이 가능하다. (향상된 객체 표기법 → 계산된 속성)&#x20;
* `add`, `remove`도 `classList`의 멤버이자 메서드이기 때문에 이렇게 접근할 수 있는 것이다.&#x20;