컴포넌트화 ... 그게 뭔데 ...
1. 버튼의 컴포넌트 화
리엑트에서는 일반적으로 HTML과 CSS를 활용해서 페이지마다 뭔가를 그리기 보다는 컴포넌트화 를 해서 페이지를 작성하는 것이 일반적이라고 한다.
나는 그런 건 전혀 생각 안하고 그리기 바빴는데 막상 이렇게 하는게 아니라고 하니 뭔가 힘도 빠지고 여기서 뭘 어떻게 해야하는지 감도 못잡겠고... 막 그랬다.
솔직히 버튼이 한 두군데에 들어가는 것도 아니고, 이걸 어찌해서 글로벌 하게 사용할 수 있도록 만들지 참으로 걱정도 많고, 멍해졌지만 일단 뭐라도 해보자는 마음으로 시작해보았다.
컴포넌트 화 라는게 그냥 단순하게 만들면 될 줄 알았는데, 고려해야할 것이 참 많았다.
버튼 하나를 여러가지 케이스로 사용하기 위해서 모양은 어떻게 해야할 지, 크기는 어떻게 해야할 지, 이게 아이콘으로 된 버튼인지 등등 여러가지를 다 고려해서 만들어야 했기에 케이스가 많이 나뉘었던 것 같다.
솔직히 내가 작성한 컴포넌트는 모자란 게 참 많아보인다는 생각을 한다. 어디서든 사용 할 수 있는 것이라기보다는 상황에 맞는 버튼에 대한 옵션을 계속해서 추가해야했으니까 ... 앞으로 계속 나누고 일을 하다보면 나만의 방법을 찾겠지만, 처음이어서 그런가.. 많이 헤메었고 딱 봐도 뭔가 많이 부족해보였다.
원래 마크업 개발자로 일하시던 분이 동기시라서 대략적인 설명은 들었지만, 직접 만들어보니 많이 어려웠다. props 요소를 어떤 것을 보내주어야 하는지도 많이 고려해야했고, 어떤 식으로 나누어서 진행할 지도 하나하나 다 케이스를 생각해야했다.
그래서 내가 일단 만들어본 것은 이랬다.
- props 정리
- scale : large(부모요소 100%), small(120px), xsmall(50px)
- shape : fell(배경색 O, 보더 X), outLine(배경색 X, 보더 O), icon, text(배경색 X, 보더 X), Content (메인 전용)
- disabled : true(배경색 : gray), false
먼저 크기는 어떻게 할 지 생각하다가, 지금 만들어야하는 페이지의 버튼들이 3가지 타입의 크기를 가지고 있어 일단 3개로 나누었고, 버튼에 색상이 차있는지, 아니면 색상은 없는데 보더만 강조되었는지 등등 생각해서 만든 것이 shape 였다. 그 다음은 버튼을 비활성화 했을 때의 케이스였고, 버튼 하나에 정말 수많은 케이스가 있는데, 그나마 이번 프로젝트에서는 사용하는 케이스가 적어서 이정도라고 하는데 앞으로 내가 진행해야할 작업물들을 생각하면 뭔가 무서워졌다.
그런데 일단 나누라고 해서 나누긴 했는데, 이 나눈 것에 대한 scss를 어떻게 부여해야 하는지 몰라서 여쭤보았더니, &[scale="small"] 같은 방법을 사용하면 된다는 말을 듣고 신기하면서도 정말 편리하구나 라는 생각이 들었다.
내가 임의로 만든 속성에 값을 넣은 것임에도 scss를 적용할 수 있다는 사실이 참으로 신기했다.
일단 공통적이면서 앞으로 추가할 속성들과 겹치지 않도록 클래스를 하나 만들어부여하고, 처음에 props 를 구조분해할당함으로써 ClassName과 type을 고정시켜주었다.
처음에 공백이 아닌 값을 주면 내가 새로운 값을 주지 않는 한은 따로 컴포넌트에 해당 속성을 집어넣지 않아도 초기 값이 자동 적용된다고 하니 너무나도 편리했다.
그래서 나는 내가 공통적으로 사용할 버튼 컴포넌트의 className을 btn으로 주었고, 이제는 내가 따로 클래스 명을 넣지 않아도 자동 적용되는 것을 볼 수 있었다.
그런데 또 막상 scss를 하나하나 주면서 보니, 공통적으로 줄 게 무엇인지, 이 속성명의 value 에는 어떤 속성을 부여할 것인지 등등 신경써야할 것들이 너무 많았다.
뭔가 정리하고 많이 알면 더욱 깔끔하고 보기좋게 만들 수 있을 것 같은데, 너무 아쉬웠지만 일단은 컴포넌트를 만들고 각 페이지의 버튼들을 컴포넌트화 한 버튼으로 교체하면서 값을 하나하나 다시 맞춰보며 하니 재미도 있었다.
내가 넣을 수 있는 버튼을 다 넣은 뒤의 그 쾌감이란 참 좋지만, 나중엔 더 좋은 방법과 방식으로 만들어보자 생각하며 다음 기능을 향해 나아갔다.
2. 쓰레드 남기기 UI 구현
회원 가입과 관련된 UI는 그렸고, 휴대폰 번호와 생일에 대한 셀렉트 박스 관련된 내용을 마치고, 이제 쓰레드와 관련된 UI와 기능을 구현해보자해서 우선 가장 쉬워보이는 것인 쓰레드 남기기 UI로 넘어왔다.
프로필 이미지와 닉네임을 배치하고, textarea 를 넣고, 컴포넌트화 한 small 버튼을 넣어주면 되기만하는 간단한 일이었지만, 막상 하고보니 textarea 속성이 말썽이었다.
textarea의 Box모양이 height 속성이 먹지않아 밑으로 내려오지 않는 현상이 있었고, 위의 이미지처럼 nickname이 제대로 들어오지 않았을 때의 상황도 뭔가 고려를 해야할 것 같았다.
아무튼 어떻게든 scss를 만져서 정상화면으로 돌아왔고, 막상 수정화면도 border의 색상만 다르기 때문에 일단은 수정쪽 UI도 구현을 해놓았다.
일단 게시글의 취소버튼을 누르면 메인 작업 페이지로 이동하게끔 useNavigate도 걸어주고, 나중에 backEnd 에게 보낼만한 데이터를 게시글이 클릭 되었을 때로 조건을 걸어놓아야 하는데, 이걸 나중에 하는 거로 스스로 협의를 보았다.
이제 이틀 남았는데, 왜이리 할 건 많고 고려해야 할 상황은 더욱 많은지.. 프로젝트라는 것이 어떤 것인지 정말 제대로 체험하고 있는 것 같다.
물론 앞으로 해야할 진짜 프로젝트는 1차와는 다르게 진짜 현업에서 하는 것 처럼 진행한다고 하는데, 2차 때는 누구와 만나 작업을 하게될지.. 참 걱정도 되면서 기대도 되었다.
