상태 관리 툴 (Redux, Recoil, R-Q, SWR), 리액트와 전역 상태 관리, CSS 라이브러리와 리액트
상태 관리 툴
- Redux : 사용자 제일 많음, 전통적, 안정적.
전역 상태관리도 하고 비동기식 처리도 하고 하는게 많다.
근데 보일러 플레이트도 많음... 설치할 수 있는 연계 패키지가 많다는게 장점이지만 문제는 너무 많다는거. 특히 강의에 있는 커넥티드라우터는 리액트의 자유로움을 다 깎아내는 느낌이다.
리덕스 툴킷으로 자주 사용되는 패키지들(특히 미들웨어)을 번들로 제공하는 기능이랑, 7개쯤 있던 단계를 4개로 줄여주는 개선안이 나왔다.
-
Recoil : 상대적으로 나온지 얼마 안된 신흥 강자. 리액트의 훅과 거의 비슷한 형태라 쓰기 쉽고 좋다. 리덕스와는 데이터 구조가 근본적으로 다르기 때문에 서로 변환이 귀찮다.
-
3번 4번은 둘다 server state를 다루는 요즘 뜨고 있다는 라이브러리다. 리코일이 리액트 내부를 전역으로 다루는데 집중한다면 쿼리와 SWR은 서버와 리액트간 데이터들의 비동기식 처리에 포커스를 둔다.
2 + 3이나 4를 같이 쓰면 시너지가 무척 좋다고 한다.
두개를 비교한 칼럼.
리액트와 전역 상태관리
리액트는 단방향이라서 데이터가 한쪽으로만 흐를 수 있다. 간결하고 우아하지만 지나간 자리에 데이터가 남지 않는게 단점이다. 그래서 어떤 형태로든 index.js에서 app을 감싸서, 어느 단에서든 접근 가능하게 만드는게 전역 스테이터스 라이브러리들이다.
프론트엔드 개발자는 첫번째로 전역 상태관리를 이해해야 하고,
두번째로 상태관리가 잘 되고 있는지 파악할 수 있어야 한다.
어디 물이 새고 있는지, 파이프가 꺾인 형태라 유속에 문제가 있진 않은지...
그리고 세번째로 가심비와 가성비를 만족하는 형태의 구조물을 만들면 된다. 유행하는 스택은 계속 변하겠지만 원리는 변하지 않으니까 최대한 많이 구경하고, 듣고, 찾아보면서 나에게 맞는 애들을 찾는게 중요하겠다.
물론 취직하면 그 애들에게 맞추려고 노력해야겠지만.
CSS 라이브러리와 리액트
와 이 부분을 쓰기 위해 정말 오래 기다렸다.
리액트에서 쓰면 좋은, 아니 어디서 써도 좋은 CSS 라이브러리는 바로 TailwindCSS다. 자신있게 말할 수 있다.
리액트를 접한지는 얼마 안되었지만 심화반 강의를 들으면서 그 생각이 더 확고해졌다. 먼저 자주 쓰이는 2가지 라이브러리들을 소개해본다.
1. SASS
css의 확장판으로 자바스크립트와 타입스크립트의 관계와 비슷하다. 타입을 명료하게 해주고 묶어주는 기능이랑 네스팅이랑, 간단한 연산, 축약어 사용가능 등의 장점이 있지만 모든 장점을 덮어버리는 커다란 단점이 있다.
sass는 별도의 변환과정을 거쳐야만 css가 된다...
프로젝트에 귀찮은 파일이 늘어난다.
2. styled components
css 자체에 뭔가 하진 않지만 jsx 태그를 덮어써주어서 컴포넌트 구조가 이쁘고 보기 편해진다. 중괄호 없이 백틱안에 다 들어가는 눈이 편안한 형태도 장점. 뒤에 설명할 거만 아니면 테일윈드와 거의 대등할 수도 있었을 정도의 심플함이다.
그리고 우리에겐 테일윈드가 있다.
3. TailwindCSS !!!
최고다!!
그냥 말할 것도 없이 최고다.
리액트에서도 다른 어디에서도(html에서 cdn으로 받아써도 너무 좋다.) 그냥 말할 것도 없이 한번 써보면 반하게 된다.
장점 1
엄청난 프리셋!
만약 내가 바닥부터 css를 배워야 한다면 내가 공부해야 하는 것들은 단위만 7가지는 된다.
하지만 테일윈드는 모든 컨텐츠가 범용성 좋은 상대단위와 퍼센테이지를 쓰고 있어서 언제 어디에다가 갖다 써도 통일성있는 컨텐츠를 보장한다.
컬러나 그라디언트에도 프리셋이 붙어있어서 색감에 대한 걱정도 할 필요가 없고, 좀더 유니크한 색감을 찾고 있다면 색상팔레트를 커스텀 할 수가 있다. 심지어는 간단한 사진보정 프리셋도 제공한다.
내가 만약 css를 잘 모르는 상태라도 괜찮다. 상상할 수 있는 거의 모든 것들을 프리셋으로 만들어놓고 그림과 예시를 첨부한 공식문서가 있기 때문에 읽다보면 저절로 알게 된다!
장점 2
직관적인, 연계된 네이밍!
내가 만약 백그라운드에 노랑 배경을 입히고 싶다고 하자. 바닐라 css에서는 yellow라고 써서 안이쁜 쨍한 노란색을 입히거나 색상표를 찾아 구글 어딘가를 헤매는 작업이 필요했다.
그러나 테일윈드에서는 그럴 필요가 없다.
yellow 팔레트 셋이 이미 있으니까! 이건 1번을 설명한거지만 아무튼 이걸 이제 내 디브에 가져올건데 형태는 이렇다.
<div className="bg-yellow-400"></div>리액트라 클래스네임을 쓴건데 클래스로도 작동은 한다.
b = back g = ground
옐로의 4번째 컬러셋!
이보다 쉬울수가 없다.
만약 디브의 테두리에 노랑을 입히고 싶다면?
<div className="border-yellow-400"></div>인풋이나 텍스트에리어의 테두리에 노랑은 어떨까.
<div className="ring-yellow-400"></div>좀더 진한 노랑이나 연한 노랑을 하고 싶다면?
<div className="bg-yellow-200"></div>
<div className="border-yellow-400"></div>만약 갑자기 파랑이 하고 싶어진다?
<div className="border-blue-400"></div>템플릿 하나 붙잡고 3일 정도면 당장 프로젝트 쓸만큼은 마스터할수 있고 정말 이것도 돼? 하는 수준의 엄청난 기능들이 잠들어있다.
장점 3
자주쓰는 css 기능들의 프리셋 화
단순히 색이나 단위를 프리셋하는데에서 멈추지 않는다!
이쁜 박스를 만들기 위해선 필수인 그림자 기능 프리셋을 살펴보자.
만약 바닐라 js를 사용한다면
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);라고 써야 한개의 그림자를 만들 수 있지만.
테일윈드에서는 이거면 된다.
<div className="shadow"></div>그리고 2번이 다시 등장한다.
shadow-sm은 작은 그림자, shadow-md는 중간 그림자, lg, xl 등등... 저 긴 두줄짜리 코드를 8글자로 줄여버리는 마법!
다시는 그림자를 세팅하기 위해 구글링을 해서 코드를 붙여넣을 필요가 없다. shadow라고만 쓰면 된다! 익스텐션을 쓴다면 자동완성도 지원하니 더더욱 안쓸 이유가 없지.
shadow라고 치면 화면에
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none
를 다 보여준다는 소리다.
기본 애니메이션 프리셋도 있다... 8글자로 애니메이션 키프레임을 가져다가 쓸 수 있다. 커스텀도 가능하다. 뭐 이거말고도 호버수정자나 반응형 웹 설정, 다크모드 설정 등의 엄청난 장점들이 더 많지만!
너무 길어져서 이만 줄이고 테일윈드의 단점을 짧게 설명한다.
테일윈드의 단점
테일윈드의 단점은 inline style만 사용가능해서 코드가 지저분해진다는 거였다. 과거형이다. 왜 과거형이냐면 tailwind-styled-components 패키지가 나왔기 때문이다. 그렇다. 테일윈드가 스타일드 컴포넌트의 장점을 그대로 삼켜버렸다.
이제 우리는 패키지를 가져다가, 설치하고.
import tw from "tailwind-styled-components";
const Ttime = tw.div`
bg-yellow-300 rounded-sm
text-yellow-800 font-sanss2
justify-evenly items-center
shadow-md my-3 p-4
`
...
return
<Ttime> 우와아아아아 <Ttime>
...이러면 끝이다! 정말 필요한 것들만 남은 컴포넌트와...
그리고 따옴표와 세미콜론에서 해방된 css를 보라.
스타일드 컴포넌트의 props 전달 기능같은 것들은 그대로 쓸수 있으면서 그 안에 있는 코드들은 테일윈드의 규칙을 따른다.
심지어 원래 styled-components와 별개의 패키지로 취급되기 때문에 둘다 써도 상관없다. 원래 쓰던 inline style도 급할때 막 써도 된다. 테일윈드를 쓰다가 다른걸 쓰면 팔 10개 -> 1개 되는 기분이다.
말할것도 없이 사람 팔은 원래 2갠데! 그만큼 좋다는 얘기다.
앗, 쓰다가 너무 길어졌다.
그치만 css는 어디까지나 있으면 좋은거니까...
상태관리를 익히는데에 집중하자...
이번주 배운것 / 느낀것 / 내게 아쉬웠던 것
배운 것
심화반 강의가 2022년 지금 기준으론 레거시급 기술들인거 같은데 현업에서는 안정성을 이유로 이런 패키지를 쓸 수도 있기 때문에 익숙해져야겠다는 것?
느낀 것
기술의 흐름이 정말 빨리 바뀐다는 거?
2년전 강의인데 이미 쓸수 없을 정도로 변해있고 막... 제대로 따라가려면 역시 영어로 된 공식문서를 보고 직접 적용해보는 수밖에 없는 것 같다. 구글 번역기는 신이다.
아쉬웠던 것
리액트를 제대로 배울 수 있는 기간이 2달뿐이고, 그나마 그중에 1달은 실전프로젝트를 하면서 실시간으로 적용해나가야 한다. 지금 배우는 이 기초개념들을 그냥 넘어가면 안될 것 같은데... 그치만 당장 실전 프로젝트에 쓸것들도 배워야하고. 근데 그와중에 시행착오도 엄청 많았다.
분명히 커리큘럼 상으로 막을 수 있는 시행착오인데 좀 막아주시지 하는 생각이 드는건 어쩔 수 없지만 ㅠㅠ 현업에는 그런거 막아주는 배리어가 없을테니까 미리 백신을 맞은거라고 생각하기로 했다.
