[내일배움캠프 TIL] 40일차

오늘 새로 배운 것

어제에 이어서 화면 새로고침하면 서버로부터 받은 데이터 날라가니까 새로고침 직후에는 콘솔값에 빈 데이터로 넘어오는 것을 확인했다. 곧 title값과 content 값도 undefined로 넘어온다. 그리고 useEffect 코드에서 첫 렌더링 될 때 서버로부터 읽어오는 getPost 명령을 날리고 이제 빈 데이터가 아닌 추가했던 데이터가 정상적으로 넘어오는 것을 확인하였다. 하지만 redux의 값이 변한 건 아니고 title, content도 그대로 undefined 값이라고 한다. 근데 이부분이 왜 그런건지 어제 설명을 들은 것 같은데 이해하기 어렵기도 하고 아침부터 늦은 시간까지 빡코딩하느라 집중이 좀 흐트러졌었고 빠르게 지나가서 기억이 나지 않는다.

배운 것으로부터 추측하기로는 아마 서버로부터 데이터를 받아오는 배열은 기존의 배열로부터 복사되어 새롭게 반환된 배열이기 때문에 기존에 넘어오던 원본 배열의 데이터에는 값이 변한 것이 없기 때문에 불변성 유지에 의해 그대로 title과 content값이 undefined라고 한 것이 아닐 가 싶다.

const DetailPage = () => {
  const dispatch = useDispatch();
  const { posts } = useSelector((state) => state.posts);
  // console.log('post 값: ', posts);
  const param = useParams();
  const post = posts.find((post) => post.id === param.id);

  const [title, setTitle] = useState(post?.title);
  const [content, setContent] = useState(post?.content);
  const [edit, setEdit] = useState(false);

  useEffect(() => {
    // dispatch(__getComment());
    dispatch(__getPost());
  }, [dispatch]);

그리고 useEffect 부분을 코드 좀더 윗부분에 써준다고 해서 값이 무조건 빨리 들어오는 것도 아니다. 왜냐하면 비동기기 때문에 서버로부터 응답을 언제 받을지 알 수 없기 때문이다.

그리고 기억나기로 useState를 써서 setState로 state값을 변하게 하지 않으면 렌더링해도 그 바꾼 값을 인식하지 못한다고 했던가?... 어제 피곤해서 이부분에 대한 설명을 맞게 들은 건지 모르겠다.
아무튼 확실한 것은

const updateTodoHandler = (event) => {
    event.preventDefault();
    props.todo.title = title;
    props.todo.content = content;
    if (title.length !== 0 && content.length !== 0) {
      setAppendElement(!appendElement);
      dispatch(updateTodo(props.todo));
    } else {
      setEditModalOpen(true);
    }
  };

state를 업데이트할 때(title, content 표현식 부분) 이런 식으로 코드를 작성하면 안된다는 것이다. 운좋게(?) 바뀐 값으로 동작은 원하는대로 하는 것처럼 보일 수 있으나 정석대로라면 setState 함수를 이용해야한다고 한다.

상세페이지 수정 기능을 담당하는 구현부에서 계속

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

이런 오류가 나는데 이 오류의 해결책으로 input의 value에 {|| ''}이걸 추가하라고 하는데 나의 경우에는 근본적인 해결책이 아니었다. 원인은 아래 코드에서

useEffect(() => {
    if (posts.length < 1) {
      return;
    }
    setTitle(title); //문제의 부분
    setContent(content); //문제의 부분
  }, [post]);

setState 내부의 값을 title, content로만 줘서 나는 오류였다. undefined가 계속 들어와서 redux 모듈을 손봐야되나 했는데 어제 튜터님의 말씀대로 비동기 통신을 통해 getPost로 내가 원하는 데이터가 들어와도 title, content값은 그대로 undefined일 거라는 말씀이 다시 생각났고 undefined로 불변한 값을 변경하려고 setState 함수에 넣으니 그런 것이었다. redux 모듈 코드를 손 볼 필요없이 그냥 setState 안에 title, content 앞에 post. 을 붙여주어 간단히 해결했다.

하루를 돌아보며...

오늘도 프로젝트로 정신없이 보낸 것 같다.
dayjs와 react full calendar 라이브러리를 오늘 처음 알게 되었는데,
우선 dayjs는 기존에 같은 기능을 하는 mommentjs 라이브러리보다 훨씬 가벼우면서도 immutable하다고 본 것 같다. 새로고침하면 몇분 전, 몇시간 전 이렇게 나오는데 immutable하게 구현한 게 신기하다.
앞으로도 매우 유용하게 사용할 것 같다.
react full calendar는 직접 구현해보지 않아서 코드 구성을 아직 제대로 익히진 않았지만 이걸 사용한 팀원의 말을 들어보니 그리 어렵지 않게 적용할 수 있을 것 같다.