value 와 defaultValue 의 차이

저도 배우는 입장이지만 지나가다 아는대로 써봤어요value는 무조건 수정이 안 되는 건 아닌데요일단 사용자가 직접 input 창에 입력, 수정할 수 없는 값이면 readOnly를 써줘야돼요import { useState } from "react"; export default function TestPage() { const [zipcode, setZipcode] = useState(""); const onChangeZipcode = (event): void => { setZipcode(event.target.value); console.log(zipcode); }; return ( ); }대충 위처럼 작성하고 실행해보면 입력이 안 먹히고 Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. 라는 경고가 뜨는데 왜냐하면value={zipcode}인데 onChange가 없으니 사용자가 input창에 입력하는 걸 감지하고 zipcode를 바꿔줄 수가 없어요만~약 사용자가 input창에 입력을 한다 쳐도 zipcode가 안 바뀌는데 value는 무조건 zipcode여야 하니까 input창에 입력이 된다면? 이상해지는거죠 그래서 저렇게만 쓰면 어차피 readOnly로 만들어지고, 진짜 이렇게 동작하는 걸 원하는거면 readOnly를 명시적으로 쓰라는 소리같아요얘도 value="07250"이면 뭔 짓을 해도 07250에서 안 바뀔테니까 얘도 같은 경고가 뜰거에요 이게 강의에서 예로 든 "반갑습니다"를 value로 넣은거랑 같은 거고 그래서 value를 수정할 수 없다고 하신 것 같은데만약이렇게 onChange를 붙여서 사용자가 입력하는대로 zipcode도 바뀔 수 있게 해주면 value여도 입력내용이 바뀌어요 근데 defaultValue는 onChange 없이 얘만 달랑 써도 입력을 바꿀 수 있어요value는 무조건 그 입력창에 써져있는 게 항상 value값이어야 하는거고defaultValue는 말그대로 처음에 기본값으로 써져있는 것뿐이라 뭘하든 수정이 되는거죠 결론적으로 zipcode의 경우에는 value를 입력창에서 직접 수정할 수 없기 때문에 readOnly를 써야하고, 안해보긴 했는데 readOnly를 빼도 어차피 readOnly로 만들어질 것 같아요그리고 value는 사용자의 입력 값이 state와 연결되는 제어 컴포넌트에서 사용하고 defaultValue는 비제어 컴포넌트에서 사용한다고 하네요https://ko.react.dev/reference/react-dom/components/input여기에도 자세한 내용이 나와있네요 그리고 props.address !== ""가 거짓인 경우를 물어보셨는데 제가 생각하기엔게시글 작성이든 수정이든 처음에는 무조건 props.address === "" 일 거예요새로운 페이지로 넘어갈 때, state도 전부 새로 초기화되면서 만들어지는 걸로 아는데 그럼 address도 (작성이든 수정이든) 초기값인 빈 문자열로 만들어진 상태일 것이고그래서 처음에는 무조건 props.address !== ""이 아니니까, 즉 address가 빈 문자열이니까 props.zipcode 가 아닌props.data?.fetchBoard.boardAddress?.address ?? ""여기로 넘어오고, props.data?.어쩌구저쩌구.address가 존재한다면 이게 바로 글을 수정중(더 정확히 말하면 수정하려는 글에 이미 기존에 작성한 address가 존재함)이라는 뜻이에요왜냐하면 애초에 props.data는 edit 페이지에서만 fetchBoard해서 전달하고 있거든요 new에서는 data가 없어요아무튼 이 props.data.어쩌구.address값이 있으면 이걸 주소창에 넣어주는거니까 그럼 수정 페이지에 게시글에 썼던 주소가 알아서 채워져서 보이겠죠(이게 defaultValue 역할)그리고 props.어쩌구.address가 없다는 건 new 페이지(게시글 작성하는 경우)이거나 수정할 글에 주소를 설정하지 않았거나? 일 것 같네요 그렇게 ""가 되는거고마지막으로 props.address !== ""인 경우는 사용자가 주소를 골랐을 때(=주소라이브러리 창에서 주소 골라서 onCompleteAddressSearch가 실행되고 address라는 state가 변경되면서 ""이 아닌 값이 되었을 때) 이 고른 주소가 나와줘야 하니까 props.address가 비로소 value로서 표시되고요 마지막 질문은 저도 정확히 모르겠지만 위의 내용상 value를 쓰는게 맞는거같아요 writer state와 입력값이 연동되기 때문에요그리고 제가 나중에 댓글 수정을 구현하면서 이런식으로 바꾸게 되었고value={ props.writer !== "" ? props.writer : props.el?.writer ?? "" }이때 props.writer를 defaultValue로 하니 생기는 문제점이저는 내용을 입력하고 등록하기를 누르면 새 댓글이 작성되면서 댓글창의 작성자와 비밀번호와 내용은 비워지도록 하고 싶어서, 등록하기를 누르면 실행되는 함수 마지막에 state들을 setState("")로 바꿔버렸거든요근데 defaultValue를 쓰니까 이렇게 다른 곳에서 state를 ""로 바꾼 게 적용이 안 되어버려요그러니까 입력창의 내용과 props.writer의 내용이 항상 같다는 보장이 없다는 거예요...onChange={props.onChangeWriter}가 있기 때문에 입력창에서 철수 라고 쓰면 그게 곧 writer state값이 되긴 하지만반대로 다른 곳에서 setWriter("영희") 해봤자 입력창의 내용은 바뀌지 않는거고, defaultValue는 처음 초기값을 표시하는데서 역할을 다하는거죠만약 value={props.writer}면 영희로 바뀌었겠죠이래서 아마 state와 입력값이 연결될 때는 value를 사용해야 한다고 하는 것 같아요

린터 Parsing error

해결 못해서 .eslintrc.js의 ignorePatterns에 **/**.js도 추가해서 그냥 js파일 포함 안시키고 커밋은 성공했네요