코드 땜장이

https://github.com/pmndrs/zustand  react 앱의 상태관리는 꽤나 여러가지 중에서 선택 할 수 있다.  잠깐 나열해 보자면 지난 번에 사용 했던, conext를 사용 한 방식이나 Redux, MobX, Recoil같은 라이브러리류들이 있을 수 있다.  이번에는 zustand 라이브러리를 이용해보았는데, 사용 법은 context를 이용한 방식보다는 편하게 느껴지는 것이 있다. 특히나 context를 사용 하기 위하여 tag를 사용하지 않아도 된다는 것이 context와의 큰 차이점으로 보인다.  일반적으로 context로 상태관리를 하는데에 있어서 reducer를 이용하는데, 그런 방식으로 상태 변경을 구현 하는 것보다는 좀 더 자유로운 느낌을 받았다.  항상 그러했듯이 아래의 코드와 위의 코드를 비교해보고 직접 판단해보길 바란다.

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보았다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  slot을 다루는 방식에서 꽤나 react와 vue에서 지원하는 방식이 꽤나 큰 차이를 보인다. slot-scope를 지원하기 위해서는 react에서는 children을 함수로써 다루어야 하는 방식 등... 꽤나 불편하다. 이 스타일은 부모입장에서 slot-scope를 사용 할 여부가 없더라고 하더라도 자식이 slot-scope를 지원하기 위하여 함수를 받게끔 되어있다면? 이는 부모 입장에서 꽤 불편한 방식이라고 볼 수 있다.  또한 이름있는 슬롯을 제공하기위해서 이름 없는 children과 이름있는 children의 방식의 차이가 있어서 별로 이다. 기본적인 children만 제공하는 것으로는 태그처럼 다루어도 되나 이름있는 chlildren을 제공하기 위해서는 값처럼 다루어야 하기 때문이다. ( 물론 jsx에서는 태그는 값이다. )  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다. 아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.