2024.02.06 TIL #useRef로 ref가 부여되는 시점 #payload의 데이터형

과제 중 이슈 1

- useRef는 이전 포스팅에서 다뤘던 바와 같이 2가지의 기능이 있다.

1. 저장공간

2. DOM 요소의 참조기능

여기서 2번의 DOM 요소를 참조할 때에는 ref가 부여되는 시점을 잘 알아야 한다.

useRef를 통한 ref의 부여는 컴포넌트가 위에서 아래로 다 렌더링이 다 되고 부여된다. 

따라서, ref.current로 특정 태그를 참조하려고 했는데 컴포넌트가 다 렌더링 되기 전에 ref가 부여되어서 undefined가 뜨며 참조할 수 없었다.

 {click ? (

            <DetailEditArea

              defaultValue={foundLetter.content}

              onChange={renewContent}

              ref={textAreaRef} // 이 부분을 textAreaRef .current로 참조하고 싶었으나 계속 undefined 가 나왔다.

            ></DetailEditArea>

          ) : (

            <DetailEditPArea>{foundLetter.content}</DetailEditPArea>

          )}

 

해결법

- 렌더링이 다 되고 ref가 부여되도록 해야겠다.

렌더링이 다 된 후 함수가 실행되도록 하는 기능: useEffect

 useEffect(() => {

    if (textAreaRef.current && click) {

      textAreaRef.current.focus();

    }

  });

 

- useEffect 는 기본적으로 jsx 컴포넌트가 다 렌더링이 된 후에 실행된다.

  따라서 이 기능을 이용해서 먼저 렌더링이 된 뒤에 ref가 부여되도록 하여  textAreaRef.current 를 사용했다.

 

과제 중 이슈 2

 const editHandeler = () => {

    if (editContent === foundLetter.content) {

      alert("수정된 내용이 없습니다.");

      dispatch(clickChangeTrue());

    } else {

      alert("수정이 완료되었습니다.");

      dispatch(clickChangeFalse());

      dispatch(

        editNdeleteLetterList([

          ...restLetterList,

          {

            ...foundLetter,

            content: editContent,

            createdAt: String(new Date()),

          },

        ])

      );

    }

  };

  // [...restLetterList,{...foundLetter,content: editContent, createdAt: String(new Date()),}] ==> action.payload

  // ...restLetterList,{...foundLetter,content: editContent, createdAt: String(new Date()),} ==> [action.payload]

 

- 넘길 때 [...restLetterList,{...foundLetter,content: editContent, createdAt: String(new Date()),}]

이렇게 넘기고 리듀서에서 action.payload로 받으면 원하는대로 렌더링이 되었지만,

- ...restLetterList,{...foundLetter,content: editContent, createdAt: String(new Date()),}이렇게 넘겼을 때는 restList의 첫번째 객체만을 리듀서가 받아드렸다.

- 리듀서는 payload를 넘겨받을 때 항상 "객체형"을 받아 처리하기 때문이다.

=> 리듀서에 payload를 넘길 때는 항상 완성형 데이터(객체, 배열)형으로 넘겨야 한다.