inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 리뷰

댓글 내용 수정 중 문제 / inputs 리팩토링 중 질문

해결된 질문

155

희주

작성한 질문수 4

0

안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요

 

첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요

댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요

value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" }

수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요

아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요

 

 

두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요

// BoardCommentWrite.container.tsx
// ...
  const onClickWrite = async (): Promise<void> => {
  // ...
  
    // setWriter("");
    // setPassword("");
    // setContents("");

    setInputs(
      (prev) =>
        Object.fromEntries(
          Object.keys(prev).map((key) => [key, ""]),
        ) as typeof prev,
    );
  // ...
}

댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요
위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요...

사실
setInputs({ writer: "", password: "", contents: "" })
그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요

이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?

react node.js seo graphql next.js

답변 1

1

노원두

안녕하세요! 희주님!

  1. 이미 작성한 댓글을 삭제하는 것은 가능하나, 빈문자열("")로 수정하는 방법은 일반적인 웹 서비스에서 허락되지 않는 경우가 대부분이랍니다!
    왜냐하면, 등록할 때도 마찬가지로 빈문자열("")의 댓글을 등록하려면 등록이 안되는 것과 동일한 맥락이에요!

    그럼에도 불구하고, 이를 가능하게 만들고 싶다면, state를 하나 만들고(ex, const [touch, setTouch] = useState(false)), 댓글의 입력창을 1회 이상 건드렸을 때 해당 state를 true로 변경해 보세요!^^
    실제로 비슷한 경우에 많이 사용되는 변수명(touch) 이랍니다!

  2. 희주님! 정말 실력이 많이 올라오신 것 같아요!^^
    Object.fromEntries 기능을 활용하여 리팩토링 하신 것 깔끔한 방법인 것 같네요!^^

    1) 위에서 만든 방법을 import만 하여 재사용 가능하도록 function으로 만들어서 언제든지 불러올 수 있도록 업그레이드도 고려해 볼 수 있을 것 같아요!

    2) 만약, form이 너무 복잡해져서 안의 구성 내용을 한눈에 파악(코드가 복잡하고 큰 규모의 프로젝트라면, 코드가 길더라도 가독성 높고 안전한 코드가 더 중요합니다!)할 수 있어야 하는 경우라면,
    const initialize = {
    // name: "",
    // age: "",
    // likeCount: 0
    // ...
    // ...
    }
    와 같이 초기값을 설정해 주시고, 초기화가 필요할 때 setInputs(initialize) 형태로 사용해 보세요!^^

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

81

1

댓글 기능 구현 중 질문드립니다.

0

92

1

쿠폰코드 발급

0

216

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

124

2

문의드립니다!! ㅠㅠ

0

136

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

111

2

_app.js 작성 이후로 에러가 발생하네요

0

118

2

학습자료

0

98

2

학습자료가 안열립니다.

0

71

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

69

0

기존강의 구매자, 업데이트 끝인가요?

0

128

3

업데이트 버전 수강

0

105

2

완벽한 프론트엔드

0

159

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

95

1

graphql 접속이 안됩니다.

0

123

2

const, let 사용 질문 드립니다.

0

92

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

162

2

회원가입 과제 피드백 부탁드립니다.

0

100

2

styled.span / styled.input "CSS 자동완성"

0

61

1

쿠폰 발급 관련

0

189

2

서버 502 error

0

268

2

쿠폰 다시 부탁드려도 될가여?

0

150

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

195

2

2분 44초 질문

0

146

3