재사용 가능한 컴포넌트 계획
입사 3주 차에 드디어 임무가 생겼습니다!
총 4개의 페이지를 만들어야 합니다.
당장 코딩부터 시작하기 전에
1. 중복되는 컴포넌트가 어떤 게 있을지 판단했습니다.
2. 이미 만들어져 있는 재사용 가능한 컴포넌트를 찾았습니다.
(전임 개발자분께서 이미 개발해놓으신 부분을 최대한 활용하기 위해)
3. 컴포넌트 구조를 짰습니다. 그리고 데이터를 props로 넘길지 전역상태를 사용할지 판단했습니다.
페이지 하나가 꽤 구조가 깊어서 전역상태관리를 사용하기로 했고 리코일로 결정했습니다.
기존에는 리액트쿼리를 사용해서 서버 상태 관리를 하고 컨텍스트 api를 사용하고 있었습니다만
리액트 쿼리가 너무 잘 정돈되어 있어서 계속 사용하고 싶었습니다.
게다가 서버에서 받은 데이터를 꽤 복잡한 로직으로 가공해야 할 필요가 있었기에 리코일의 selector를 사용할 수 있다고 판단했습니다.
4. api 연동 후의 데이터 흐름을 계획했습니다!
이번에는 그중에 첫번째로 했던 생각을 남기려 합니다.
페이지를 분석해서 재사용 해야 할 몇 가지 요소를 찾아서 모듈화 했습니다.
그리고 지금 당장 필요하지 않더라도 나중에 필요할 것만 같은..ㅋㅋ
몇 가지 요소도 재사용 가능한 컴포넌트로 모듈화 했습니다.
1. 구역을 나눠주는 divider
2. 사용/미사용 상태에 따라 toggle 되는 textarea
3. 백분율만큼 색이 칠해지는 progress bar
1. 구역을 나눠주는 divider
기존에 Divider 컴포넌트가 있긴 했지만 내용물을 children으로 넘겨받아서 위아래에 선을 추가하는 방식이었습니다.
선을 원하는 곳에 넣으려면 어떤 코드를 감싸야할지(children으로 보낼지) 잘 판단해야 했고
위, 아래 중에 어디에 선을 넣을지 props로 넘겨줘야 하기 때문에 조금 귀찮고 직관적이지 못했습니다.
나는 코드만 보고도 선이 어디에 들어갔는지 더 직관적으로 보고 싶었습니다.
[컴포넌트 이름 === 직선 하나] 이렇게 대칭되어 더 쉽게 볼 수 있는 코드를 만들고 싶었습니다.
Line은 div이고 bottom에만 색이 들어가 있습니다.
horizonMargin은 직선 양옆의 공간이고 VerticalMargin은 말 그대로 위아래 공간, 생각해보니 색상도 선택할 수 있게 해 주면
더 유용하겠네요! 암튼 이렇게 작성함으로써 직선이 어디에 들어가야 되는지 더 쉽게 결정하고 추가할 수 있었습니다.
이런 식으로 입력하면 원하는 곳에 divider가 추가됩니다. 아주 보기 좋네요.
2. 사용/미사용 상태에 따라 toggle 되는 textarea
총 세 개의 textarea를 반복해서 사용했는 데 사용 여부에 따라 disabled가 true/false 가 변경되는 textarea가 필요했습니다.
exposure라는 값으로 boolean을 보내주면 textarea를 쓸지 안 쓸지 정할 수 있도록 했습니다.
사용이 안될 때는 css요소를 바꿔서 유저가 확실하게 인식할 수 있도록 하기 위해
각 styled-components에 exposure 값을 보내서 누가 봐도 "이것은 지금 비활성화 상태입니다"라고 느낄 수 있게 만들었습니다.
그리고 가장 중요한 state인 text, setText를 props로 받고 있습니다.
왜냐하면 이 컴포넌트를 불러와서 쓰는 부모 컴포넌트가 실제로 text state를 필요로 하는 컴포넌트일 것이기 때문입니다.
이 toggleTextarea를 불러와서 쓸 때는 text state를 만들어 줄 필요가 있는 것입니다.
이렇게 해줌으로써 데이터를 관리하기도 편하고 어디서든 쉽게 불러올 수 있는 textarea가 생겼습니다!
3. 백분율만큼 색이 칠해지는 progress bar
이 컴포넌트는 분명히 미래에 다시 필요한 곳이 있을 것이라 판단해서 재사용 가능하게 만들었습니다.
양옆에 들어가는 text는 span으로 넣었고 Wrapper를 flex로 만들어서 잘 조정하면 됩니다. 이 부분은 생략
Container는 width가 정해져 있는 div이고 background color가 회색인 공간입니다.
그 안에 Progress는 노란색 div인데 width가 주어진 값의 백분율로 결정되는 공간입니다.
생각해보니 Container의 width도 props로 넘겨받을 수 있게 해 주면 더 유연하겠네요.
<Text> 컴포넌트는 실제 내용물이 있는 경우에만 나오게 해 주는 게 css 측면에서 더 낫겠습니다.
아 그냥 생각난 김에 바꿀게요.
barSize라는 props를 받아서 Container에 넘겨주어 총길이를 지정할 수 있게 해서 더 유연하게 만들었습니다.
그리고 실제 text가 있는 경우에만 <Text> 컴포넌트를 불러와서 나중에 혹시 모를 불필요한 margin이 생기지 않도록 했습니다.