defaultValue value 같이 씀

export default function BoardCommentWriter() {
  const router = useRouter();
  const [createBoardComment] = useMutation<Pick<IMutation,"createBoardComment">,
    IMutationCreateBoardCommentArgs>(CREATE_BOARDCOMMENT);
  
  const [writer, setWriter] = useState('')
  const [password, setPassword] = useState('');
  const [contents, setContents] = useState('');

  const onChangeWriter = (e: ChangeEvent<HTMLInputElement>) => {
    setWriter(e.target.value);
  };

  const onChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const onChangeContents = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setContents(e.target.value);
  };

  const onClickCommentSubmit = async () => {
    try {
      const result = await createBoardComment({
        variables: {
          createBoardCommentInput: {
            writer,
            password,
            contents,
            rating,
          },
          boardId: String(router.query.boardId),
        },
        refetchQueries: [
          {
            query: FETCH_BOARDCOMMENTS,
            variables: { boardId: String(router.query.boardId) },
          },
        ],
      });
      setWriter('');
      setPassword('');
      setContents('');
    } catch (error: any) {
      alert(error.message);
    }
  };

  return (
    <BoardCommentWriterUI
      onChangeWriter={onChangeWriter}
      onChangePassword={onChangePassword}
      onChangeContents={onChangeContents}
      onClickCommentSubmit={onClickCommentSubmit}
      rating={rating}
      writer={writer}
      password={password}
      contents={contents}
    />
  )
}

import * as S from "./BoardCommentWriter.styles";
import { IBoardCommentWriterUI } from "./BoardCommentWriter.type";

export default function BoardCommentWriterUI(props:IBoardCommentWriterUI) {
    return(
        <>
        <S.Wrapper>
        <S.CommentCreateWrap>
          <S.CommentInfoWrap>
            <S.InputWriter
              onChange={props.onChangeWriter}
              defaultValue={props.isEdit ? props.el?.writer || '' : undefined}
              value={props.writer}
              placeholder="작성자"
              disabled={props.isEdit}
            />
            <S.InputPassword
              onChange={props.onChangePassword}
              placeholder="비밀번호"
              type="password"
            />
            <S.StarWrap>
              <S.Star />
              <S.Star />
              <S.Star />
              <S.Star />
              <S.Star />
            </S.StarWrap>
          </S.CommentInfoWrap>
          <S.CommentContentWrap>
            <S.CommentInput
              onChange={props.onChangeContents}
              placeholder="플레이스홀더"
              maxLength={100}
              defaultValue={props.isEdit ? props.el?.contents || '' : undefined}
              value={props.contents}
            />
            <S.CommentRegisterBtnWrap>
              {props.contents.length}/100  
              <S.CommentRegisterBtn onClick={props.isEdit ?
				props.onClickUpdateComment : props.onClickCommentSubmit} >
                {props.isEdit ? '수정하기' : '등록하기'}
              </S.CommentRegisterBtn>
            </S.CommentRegisterBtnWrap>
          </S.CommentContentWrap>
        </S.CommentCreateWrap>
        </S.Wrapper>
        </>
    )
}

onClickCommentSubmit 을 누르면
setWriter(''); setPassword(''); setContents(''); 가 실행되서
바로바로 input 값이 시각적으로 초기화 되야 한다

근데 안된다

value 에 props.writer, props.contents 이런 식으로 전달해서
초기화('')가 되게 한다

근데 defaultValue 랑 value 랑 같이 못쓴다

그래서 : undefined 를 사용해서 isEdit (수정 상태) 가 아닐때는
defaultValue를 안쓴다고 알려주고 value 를 썼다.

근데 isEdit (수정 상태) 에서는 defaultValue 랑 value 가 동시에 쓰이므로
value 에도 똑같이 props.isEdit ? undefined : props.writer
이런식으로 적용해준다.

해결✨