0. 프롤로그

클론코딩 프로젝트가 시작되고 나서, 리액트 쿼리는 당연히 사용하게 되었고, 맡은 부분은 로그인 모달과 유저정보 입력페이지 부분이었다.
로그인 모달은 최대한 디자인을 따라해보려고 했는데 디자인마저 쉽지 않았다는 사실을 깨닫게 되었고, 유저정보 입력페이지에서는 input의 다양한 형태를 경험하고, 그 값을 폼데이타에 넣어서 서버로 전송해야 하는 미션이었다.
아주 기본적이면서도 코린이에게는 쉽지 않았던 미션...
그중에서도 해결하는데 오래 걸렸던 두가지 기능에 대해 써보고자 한다.

1. 모달창 만들기

여러 블로그를 찾아보고 조각기능을 미리 구현해보았는데, 쉽지 않았다. 이해를 한 다음에 내가 쓰는 코드에 접목을 시키려니 오류투성이라 일단 올라와 있는 코드를 그대로 복사해서 붙여넣은다음에 그것이 어떻게 작동을 하는지 파악하는게 더 빨랐다.
일단 기본적인 페이지가 있고, 그 페이지에서 버튼을 누르면 모달창이 뜨기 때문에 모달창 컴포넌트는 따로 만들어준다.
모달은 처음 만들어 보는터라 그렇게 두페이지의 코드를 작성했는데,
모달이 자주 활용된다면, 모달의 배경과 내용을 분리해서 배경을 컴포넌트로 만들고 내용을 props로 넘겨주는 방식을 써야할것 같았다.
클론프로젝트에서는 아직 익숙하지 않아서 그냥 모달창을 계속 통째로 만들었다. 모달창에서 띄워야 하는 내용은 Map함수를 활용했는데, 버튼의 형태로 모달창위에 잔뜩 띄웠는데, 모달이 마우스버튼을 클릭할때마다 꺼지는 문제가 발생했다. 그래서 최상단 컨테이너에 e.stopPropagation()을 얹어서 꺼지지 않게 막은 뒤 버튼을 클릭할때마다 새로고침 되는 부분을 없애기 위해서 각버튼을 div로 처리했다.

그리고 모달창 속 내용을 클릭했을 때, 그 내용이 페이지 위에 띄워져야 했다.
대체 어떻게 모달창 속 버튼위에 써있는 내용을 콘솔에 넣지...?
그 해답을 찾기까지 이틀이나 걸려버렸다...

답은 의외로 간단했는데,
e.target.value 대신, e.target.textContent 를 쓰면 됐다.

이제 내용을 콘솔에 찍을 수 있게 되었으면, 그 다음은 어떻게든 해볼수 있을거 같았다.

2. State와 Recoil

state의 값을 바꾸는 형태로 페이지위에 띄워야 겠다는 생각에는 금방 도달했는데, 리액트에서는 state값이 바뀌면 모든 코드가 다시 리랜더링 되면서 시작되기 때문에 새로고침 현상이 계속 발생했다.
state값이 바뀌어야 하지만, 새로고침이 되면 안되는 상황에서 RecoilState를 써서 값을 바꾸어주니 새로고침 현상이 발생하지 않았다.
버튼 위에 있던 원래내용이 state안에 들어있는 내용으로 치환되어야 하는데, 그걸 어떻게 하나 고민했었다.
답은 이미 recoilstate에 있었음에도 ... 해답을 찾지 못했는데 기술매니저님이 한번에 조언을 주셔서 해결했다.
그냥 recoil의 atom 메소드를 쓸때 그 default값에 원래의 내용을 써두면, state가 바뀌면서 자연스럽게 내용이 전환된다는 것이었다.

아... 너무 좁은 시야를 가지지 않았나 하는 반성의 순간...

리코일까지 떠올렸던건 분명 발전적인 형태였지만 항상 마무리가 아쉽다.
패스웍이 좋았어도 득점에 성공하지 못하면 패하는 농구 경기 같은 느낌이 들었다.

3.이미지 미리보기

어쨌거나 이 두가지를 해결하고 나서야 폼데이타를 시도해 볼수 있었는데,
아주 작지만 또하나의 미션이라고 하면, 이미지 미리보기를 리액트로도 구현해보는 것이었다.
HTML을 쓸때도 블로그를 보고 복붙했었다. 자바스크립트로 구성된 코드라고 들었다.
리액트는 자바스크립트 기반이기 때문에 이 역시도 금방 해결할줄 알았건만.. 아직 블로그를 보면서 코드를 한번에 이해하기에는 조금 어려움이 있는것 같다.
이것도 조각기능을 먼저 테스트해보았는데, 조금 옛날 느낌으로 처리되어 상대적으로 길게 쓰는 방식이었지만, 전체코드가 나와있어서 이해하기 편했던 한 블로그를 참조하기로 했다.
이미지를 띄우기 위해 사용했던 메소드는 readAsDataURL()이었다. 폼데이타에 넣어야 하는 부분의 state도 따로 만들고, 미리보기가 이루어지기 위해 담기는 내용의 state도 따로 만들어서 서버에 그 내용이 들어가지 않게 구분지었다.
base64로 변환을 하는 바람에 엄청 긴; 텍스트가 네트워크창을 도배하는 것을 보고 걱정이 되었지만, 결과적으로는 이미지도 잘 뜨고, 데이터도 잘 넘어가게 되었다.
다만, 이렇게 base64로 변환하는 방식은.. document.querySelector를 써서 className으로 위치를 지정해주어야 하고, 백그라운드 이미지로 기본 적용되기 때문에 코드가 좀 길어지는게 단점이었다. 백그라운드 이미지를 변환하기 위해서는 스타일드 컴포넌트쪽에서 수정을 하면 적용이 되질 않아서 함수의 하위에 줄줄히 써주는 방법밖에는...

다음에는 이런 방식말고 더 간결한 방식을 이해해서 적용해 보자고 다짐했다.
어쨌든 기획안대로 프로젝트를 완수했고, 나의 역할은 계획보다도 조금 더 미미해졌지만 아무것도 해보지 못한게 아니라 조금이나마 구현하고 해결한 것들이 있어서 약간의 힘을 얻는 클론코딩프로젝트 였다.