[TIL] useRef로 변수 값 고정하기

배운 것

글 수정 기능을 구현하던 도중 다음과 같은 오류를 만났다.

• 구현하려던 것 : 위에 있는 input (textarea) 창에서는 자유롭게 수정을 하고, 밑에 있는 Original Body 부분에서는 기존 글 내용이 보여져야 한다.
• 만난 오류 : 기존 글 내용을 useEffect 안에서 axios로 받아온 뒤, 해당 내용을 input 의 body 상태로도 넣었다. 그 뒤 다시 body 상태의 내용을 value Original Body의 내용으로 넣었다.

const [body, setBody] = useState('')
let originalPost = body

 const getOriginalPost = () => {
    axios
      .get(`/v1/${mode}/${id}`)
      .then((res) => {
        const postData = res.data.data
        setBody(postData.content)
        originalPost.current = postData.content
      })

 

• 해결 방법 : useRef로 값이 렌더링에 영향받지 않도록 고정했다.

https://velog.io/@juno7803/React-useRef-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[React] useRef 200% 활용하기

• 부가적 오류와 해결 : originalPost = useRef() 로 받아오는 것은 객체고 실제 값은 originalPost.current 프로퍼티에 담겨있는데, 그걸 모르고 JSX에서 {originalPost} 로 가져왔더니 에러가 났다. {originalPost.current}로 변경해서 해결

https://itprogramming119.tistory.com/entry/React-Objects-are-not-valid-as-a-React-child-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

 

---

회고

useRef는 되도록 본래의 취지 외에는 사용하지 않는 게 좋다고 듣긴 했는데, 마땅히 다른 방법을 찾지 못하기도 하고 많이들 이 목적으로도 사용하는 것 같길래 우선 아는 방법으로 해결했다. 나은 방법을 찾으면 고쳐야지.