리액트 질문

[쟈니]

안녕하세요~

input 다루기 2 맨 아래 응용질문들 3개 중 막히는게 있는데 혹시 관련한 풀이법은 어디에서 볼 수 있을까요?

또 한가지 질문은, input 칸에 타이핑을 하는데 텍스트가 한개씩만 써지고 계속 커서를 클릭해줘야 연속해서 타이핑을 할 수 있습니다 ㅠ 왜 그런걸까요?

감사합니다 :)

 

[codingapple]

답은 없습니다 안되는거 물어보시면 됩니다 
인풋에 value=어쩌구를 제거해봅시다

[쟈니]

https://codesandbox.io/s/cranky-pond-tnp6q1?file=/src/App.js

1. input에 vaule를 없애면 타이핑이 아예 되지가 않습니다.
여러 방법으로 해봐도 타이핑이 딱 한글자만 되고 그다음에 이어서 인풋에 텍스트를 쓰려면 계속 커서를 놔야하는데 뭐가 문제일까요?

2. 수정한 코드가 없는데 좋아요 수를 누를때 1씩 증가하는게 갑자기 화면에 NaN으로 뜹니다 ㅜ

<div id="mttContainer" class="bootstrapiso notranslate" dir="ltr" style="transform: translate(958px, 81px);" title="" data-original-title="값"> </div>

[쟈니]

2번은 해결했는데 여전히 1번 문제가 해결이 안됩니다 ㅜ

<div id="mttContainer" class="bootstrapiso notranslate" style="transform: translate(412px, 2px);" title="" data-original-title=""> </div>

[codingapple]

state변경될 때 마다 Form 컴포넌트도 재렌더링되어서 그런듯요 
input태그를 밖으로 빼거나 합시다

[쟈니]

말씀해주신대로 input 태그를 뺐더니 잘 작동합니다! 감사합니다 :)
그런데 form 안에 input과 submit 버튼을 넣고 컴포넌트를 만들어 좀 더 코드를 깔끔히 쓰고 싶다면 어떻게 해야 좋을까요?

[codingapple]

컴포넌트만드는 문법은 다른 컴포넌트 바깥에 씁시다

[글쓴이]

글