개요
코틀린은 바이트코드뿐만 아니라 자바스크립트로도 컴파일할 수 있습니다.
이를 이용해 리액트 라이브러리가 구현되어 있으며
이를 통해 리액트 프로그래밍이 가능합니다.
오늘은 Kotlin/JS를 이용하여 To-Do-List를 만들면서
느꼈던 생각들에 대해서 공유하고자 합니다.
코틀린으로 리액트 프로그래밍 방법은 위 Github에서 보실 수 있습니다.
Kotlin으로 굳이 리액트 프로그래밍을?
코틀린은 어떤 한 분야에 특화되어 있는 언어가 아닙니다.
따라서 안드로이드, 서버 개발을 넘어 프론트엔드 개발에도 힘쓸 수 있다고 생각합니다.
그러면 코틀린으로 프론트엔드 개발을 하면 생기는 장점이 무엇이 있을까요?
1. 안 되는 걸 안 되게 할 수 있다.
코틀린은 타입 안전성이 있는 정적 타입 언어입니다.
이를 DSL로 이용하여 HTML 태그들을 구현한다면
태그 간의 상하관계를 확실하게 할 수 있습니다.
예를 들어 td 태그 안에 tr 태그가 들어가는 불상사를 방지할 수 있습니다.
또한 스타일을 적용할 때 backgroundcolor 라고 작성해서
스타일이 적용되지 않는 불상사도 방지할 수 있습니다.
2. 클라이언트와 서버를 같은 언어로 개발할 수 있다.
이는 자바스크립트로 구성할 때와 같은 장점이지만,
서버를 코틀린으로 작성해야 할 때 다른 선택의 여지를 가질 수 있다는 점에서
큰 장점이라고 생각합니다.
코드 변경될 때마다 그 느린 컴파일을 다시?
처음 코틀린으로 리액트 프로그래밍을 할 때 가장 궁금했던 점은
코드를 변경할 때마다 그 느린 컴파일을 다시 해줘야 하냐는 것이었습니다.
실제로 처음 프로젝트를 만들고 실행을 시키면서 변경할 때는
다소 느린 컴파일이 인내심을 건드리곤 했습니다.
하지만 Kotlin/JS에서는 IR 컴파일러를 내세워 이를 해결합니다.
IR 컴파일러를 사용하게 되면 코틀린 코드를
바로 자바스크립트 코드로 변경하는 것이 아니라
중간 단계의 언어로 변경하여 공격적인 최적화를 시도할 수 있습니다.
이에 대한 자세한 내용은 이 글을 참조해주세요.
동적 언어 흉내내기
실제로 리액트 프로그래밍을 하다보면 자바스크립트가 동적 타입 언어라
쉽게 가능했던 일이 있을 것입니다.
물론 정적 타입 언어로 불가능한 것은 아니지만,
굳이 정적 타입으로 해서 돌려돌려 구현하는 것보다는
직관적인 게 필요할 때가 있습니다.
그럴 때를 위해서 Kotlin/JS에서는 dynamic 이라는 타입을 지원합니다.
이 dynamic 타입은 동적 타입 언어의 타입처럼 타입을 강제하지 않고,
타입의 결정을 런타임까지로 미루도록 도와줍니다.
이렇게 Kotlin/JS는
자신의 부족한 점을 극복하기 위해 여러 대책을 마련하고 있습니다.
코드가 아름답습니다.
이건 매우 주관적인 내용이지만 코틀린으로 작성한 클라이언트 코드는 아름답습니다.
data class ToDoListState(
val toDoMessages: List<String>,
) : RState
@JsExport
class ToDoList : RComponent<RProps, ToDoListState>() {
init {
state = ToDoListState(listOf("test", "test2", "test3"))
}
override fun RBuilder.render() {
styledDiv {
css {
+MainStyles.todoListBody
}
state.toDoMessages.forEachIndexed { messageNumber, m ->
toDo {
attrs {
index = messageNumber + 1
message = m
toDoListReference = this@ToDoList
}
}
}
toDoInsertion {
attrs {
toDoListReference = this@ToDoList
}
}
}
}
}
fun RBuilder.toDoList(): ReactElement {
return child(ToDoList::class) {}
}솔직히 라이브러리를 개발하는 입장이 아니라
백엔드 개발을 하는 제 입장으로써는
수신 객체 지정 람다를 저렇게 사용하여 예쁘게 만들 수 있을지도,
프로퍼티 위임을 통해 스타일 시트를 구성하게 만들 생각도,
+ 연산자 오버로딩을 저렇게 이용할 것이라고는 생각 못했을 것입니다.
이렇게 여러 코틀린의 아름다운 문법을 이용하여 만들어진 라이브러리가
아름답지 않을 수가 없다고 생각합니다.
