React

ERROR

Text content did not match 에러!

2025.01.03

Text content did not match.Server: "December 27, 2024 at 8:18:18 AM" Client: "December 27, 2024 at 8:18:19 AM" Error Component Stack 개발된 화면들을 확인하다가 발견한 warning warning이지만 새빨간 배경에 뜨는것이 아주 거슬려서 해결해보기로 한다. 문제의 컴포넌트는 서버로부터 UNIX 시간을 받아와 예쁘게 가공해서 보여주는 컴포넌트였다. 근데 이페이지가 서버사이드에서도 그려지고, 클라이어트 사이드에서도 그려지다보니, 간발의 시점차가 생기는 경우 렌더링 되는 값이 달라져 생기는 문제였다. 먼저 useState로 관리하고 있던 값을 Date타입에서 string으로 바꾸어주었다. 기존 useS..

React & Next

ref : DOM에 이름 달기

2022.06.02

ref란? : 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법. reference의 줄임말 리액트 id를 사용하면 안되나? : id를 사용할 수는 있으나 JSX안에서 DOM에 id를 달면 해당 컴포넌트를 여러번 사용시 중복 id를 가진 DOM이 여러개 생기므로 사용을 권장하지 않는다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 발생하지 않는다. ref는 어떤 상황에서 사용해야하는가? : DOM을 꼭 직접적으로 건드려야 할때 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas요소에 그림그리기 등 ref 사용 1) 콜백 함수를 통한 ref설정 : ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다. 이 콜백함..

Text content did not match 에러!

ref : DOM에 이름 달기

티스토리툴바