Todo리스트를 만들면서 input창에 관련해서 겪었던 문제들, 해결방법들을 모아봤습니다.
토픽 별로 관련된 코드부분만 간략하게 표현했습니다!
➡️ 직접 체험해보기 링크!
타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브
Skill: TypeScript, React, Styled-components, recoil
placeholder가 아니라 value를 설정해서 그 값을 수정하기
placeholder는 클릭 시 사라지는데 value로 설정하면 그 텍스트에서 수정가능함.
할일을 입력하고 저장하면 그 입력값이 각각 리스트 input의 value초기값으로 들어감.
value에 들어갔기 때문에 수정하려고 하면 입력된 값에서부터 수정이 가능.
//ListItem.tsx
function ListItem({ content, idx }: ListItem) {
//할일만들기 input창에서 받은 content값을 props로 받아서 inputContent의 초기값으로 지정
const [inputContent, setInputContent] = useState(content);
return(
<input value={inputContent}/>
)
}input 자동완성 끄기
할일 수정기능을 구현하는데 input에 자동완성이 뜨는 것이 불편했다.
id나 email같은 반복사용되는 정보가 아니기 때문에 autoComplete='off'를 통해 자동완성 기능을 없앴다.
<input autoComplete="off"/>input 빨간 밑줄 없애기
이번엔 input 값을 수정하려고 하면 뜨는 빨간 밑줄을 없애보았다.
맞춤법검사 기능이라고 하는데 굳이 필요하지 않기 때문에 비활성시켰다.
<input spellCheck="false"/>주의⚠️
React이기 때문에spellcheck가 아닌spellCheck옵션을 줘야한다.
인풋창에 커서 유지하게 하기
수정버튼을 눌렀을 때 해당 input에 커서가 focus되도록 하는 기능이 필요했다.
안그러면 수정버튼 한 번, 해당 input 한 번씩 클릭해야했기 때문.
처음에는 돔에 직접 접근해봤지만 리액트는 돔에 직접 접근하는 것을 지양하기 때문에 다른 방법이 필요했다.
document.getElementById(idx.toLocaleString())?.focus();그래서 ref라는 prop과 useRef라는 훅을 사용해서 완성했다.
리스트 옆 수정 이모지를 누르면 해당 리스트에 focus가 돼서 별도의 마우스 클릭 없이
바로 키보드 입력으로 수정가능!
useEffect(() => {
if (inputRef.current !== null) inputRef.current.focus();
}, [beingModify]);//beingModify는 수정 중인지의 여부를 알려주는 상태값
//수정 이모지를 클릭하면 beingModify의 상태가 바뀌고, useEffect가 실행돼 해당 input에 focus가 됨Reference
타입스크립트로 리액트 상태 관리하기
특정 엘리먼트에 focus 주는 방법에 대하여
