고난이도 예제

1. 특징

• React를 사용하지 않았지만 마치 React를 사용한 것 처럼 DOM을 만들고 render() 메서드를 등을 사용한다. 이는 React가 아닌 순수한 JS를 사용한 예제이다.

• 커링 함수, 고차 함수를 사용해서 함수형 프로그래밍으로 작성한 예제이다.

2. 예제

3. 기억하기

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

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

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

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

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

특징

• add, remove를 전달 할 때 문자열로 전달한다는 것이다. → 객체의 아이템에 접근할 때, a[b] (계산된 속성), a["b"] 이 두 방식으로도 접근이 가능하다. (향상된 객체 표기법 → 계산된 속성)

• add, remove도 classList의 멤버이자 메서드이기 때문에 이렇게 접근할 수 있는 것이다.