순수함수의 중요성/position속성을 써야할때와 안될때

400줄 가까이되는 수많은 코드들에서 함수가 순수함수가 아니라면 리턴값이 어떤값의 영향을 받는지 알기가 어렵다.

오늘 몸소 깨닫고 나서야 예전에 어디선가 함수는 순수함수로 작성해라 라는 글을 보았던게 생각났다.

 

이제서야 퍼즐이 좀 맞춰지는것같다. 리코일, 리덕스 왜 다 모두 순수함수임을 강조하는지.

 

아마 아무도 이해하지못하겠지만 그래도 설명을 해보겠다.

 

클릭시 : 마우스로 지도클릭->pickpoint State 변경-> 관광지배열생성 -> 지도클릭한곳의 주소값 api통해 획득

검색버튼클릭시 : 검색어와 관련된 곳을 지도의 중심좌표A로 바꾸는 함수 -> pickpoint state를 A로 바꾼다. 
-> 클릭시 발생하는 로직 진행


이러한 생각으로 현재위치 버튼을 눌렀을때, 지도의 중심좌표가 현재위치가 되도록 하려 했다.

하지만 되질 않았다.

저 수많은 코드들에서 어떤함수가 어떤 변수의 영향을 받는지 파악하지도 못한채, 그저 안될때마다

useEffect로 렌더링순서를 조정하려고만 했다.

useEffect로 대부분 해결했었기에, 오랫동안 useEffect를 조물딱거리다가 안되겠다 싶어서 코드를 뜯어보았다.

그 결과 '버튼클릭'은 '지도클릭'이 아닌데, " '지도에 클릭한 곳'의 주소값 " 획득 이라는 사실을 

내 머릿속에서 왜곡한채로 그저 " pickpoint바꾸면 -> 주소값획득 "으로 인식하고 있었던 것이다.

그래서 오늘 함수는 무조건 순수함수로 작성해서 어떤값이 어떤값의 영향을 받는지 파악하기 쉬워야 한다는 것을

몸소 뼈저리게 깨달았다.

---

댓글기능을 완성하고 테스트하다가 이상한점을 발견했다.

 

지금은 다 바꿨고 사진을 남겨두지 않았지만, 글자를 많이쓰면 글자가 댓글창을 가리는 현상이 있었던 것이다.

 

position:relative,absolute는 주변 요소들을 신경쓰지 않고 원하는 위치에 해당 요소를 위치시킬때 써야한다는 것을 알았다.

 

position:relative,absolute로 댓글창을 만들었기때문에 , 글자가 크면 유동적으로 댓글창이 커지지 않고 댓글창을 튀어나온것이다.

 

가장 바깥요소의 댓글창테두리와 댓글창의 오른쪽 하단에 고정시키는것이 확실한 날짜요소만 남겨놓고 모두 position 속성을 지웠다. 

 

그리고 색깔로 요소들을 구분하였더니 내가 상상한대로 얼추 된것같다. 이제 이 위를 다시 예쁘게 꾸며보아야겠다.

이렇게 글자수에 따라 댓글창 크기가 변하는게 맞는것같다.