위로 늘어나는 텍스트영역

HM·2023년 6월 8일
1
post-thumbnail
디버깅하면서 동시에 항상 문서화하는 습관을 들이자.....

태그는 height 가 증가하면 주름마냥 밑으로 흐른다.

채팅방 관련 작업을 하다가 보여주는 화면은 100vh 로 영역에 딱 고정되어있으니.
채팅방 컴포넌트 작업을 하다가 텍스트 입력창의 영역을 value 길이에 맞춰 늘려보려 했다.

  1. 자유로운 텍스트 입력을 위해 enter입력시 줄바꿈이 들어가야 한다.
  2. 줄바꿈이 들어가서 문장이 길어질때 태그의 높이도 그에 맞춰 가변적이어야 한다.
  3. 현 상황은 상위 태그가 100vh 로 고정되어있으니, 텍스트 입력창은 위로 증가 해야한다.

1. 줄바꿈이 가능한 input ?

처음에는 input 태그에 onKeyDown={handleEnter} 함수로 enter입력시, 줄바꿈을 하려했다

엥 ?
이렇게 하니,메시지 전송후 말풍선에서는 줄바꿈이 적용되어 출력되지만,
정작 input 태그 입력창에서는 변화가 없었다.

  1. 메시지전송 시 \n 가 입력되어 전달 해야함.
  2. enter입력시 input 다음칸으로 내려가야함.

* 해결

그래서 복잡하게 코드로 구현하기보단 textarea태그를 사용하기로 했다.
border:none, outline:none,resize:none으로 초기화 한뒤
textarea 태그 내에서 enter 시 줄바꿈과,\n 저장이 제대로 되었다.


2. 줄바꿈이 되었으니 입력창의 크기는 !?

useRef/useEffect를 이용하여 enter입력시마다 height값이 커지게하면 되겠구나 !

아?
생각해보니 부모태그에 가변적으로 설정을 해둬야. 입력태그가 따라가겠다 생각하고


에 div 태그에 스타일을 주었다.

오 늘어난다 늘어난ㄷ.?


3. 입력창이 내려가요....ㅜㅜ

html 특성상 height값을 늘리면 아래로 내려갈테니 여기에 대해서 생각을 해봤다.

단순히, flex-direction column-reverse가 높이를 반대로 커지지 않게 할까 하고 설정해봤지만 되지 않았다...


내려가지말라고...

* 해결

곰곰히 생각해보니 height가 커지면 영역이 밑으로 내려갈테니. 태그의 시작점을 위로 올리면 되지않나 ?
하고 margin-top을 음수로 처리하였다.

  • useRef를 이용하여, textarea태그에 ref를 걸어두고,

  • useEffect 로 ref.current를 잡는다.

  • 현재 textarea태그의 높이값을 scrollheight로 가져온다.

  • inputValue 값이 많아지면(줄바꿈이 많으면) 상태가 변화해야하니 useState도 사용한다.
    (margin에 사용할state,height값에 사용할 state)

  • setState에 저장후, 스타일에 적용한다 !


일단 원하는대로 작동을 하는데...

useEffect로 처음 setHeight를 잡다보니.처음 textarea태그가 -26px 위로 올라가있는다.
조절하여 내려준다.


매우뿌듯

다음은 ?

  • 글자를 지우면 다시 줄어들게 하자.

좋았어..!

profile
It's the smurf smurf smurf!

0개의 댓글