twingkle

❓문제 Warning: validateDOMNesting(...): cannot appear as a descendant of . 🚧 에러메세지 Warning: validateDOMNesting(...): cannot appear as a descendant of . 아래는 현재 내가 쓰고 있는 코드인데, 처음에는 상세보기로 들어가는 링크를 제목인 BrandName 에 걸었다가 다른 사이트를 둘러보니 전체를 눌러서 상세보기로 들어가는 곳이 많아 전체로 다시 링크를 거는 작업을 거쳤었다. //첫번째 상세보기 > //두번째 {[order.orderProducts[0].brandName]}{order.orderProducts[0].title} 외 {order.orderProducts?.length}개 색상: ..

💡문제 input 입력은 되지만 콘솔에서 계속 뜨는 에러메세지 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. react_devtools_backend.js:4026 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide betw..

❓쓰게된 이유 처음 프로젝트를 시작할땐 탭의 수가 별로 많지 않았기에 그냥 하드코딩하는 방식으로 useRef()를 썼는데, 진행을 하다보니 브랜드의 수만큼 탭수가 늘어나고, 브랜드가 추가되면 또 일일이 추가해줘야하는 번거로움이 생겼다. 💡목적 그래서 map으로 돌려주어 한번만 쓰려고하는데 찾아보니 click했을때 이동되는 탭으로 만들어두신 글은 잘 없었다. 여러개의 글들을 참고하여 구현해봤다. 우선 내가 구현해야할 기능은 탭을 눌렀을 때, Ref가 되어있는 곳으로 내려가야 하는 기능이다. 위의 화면에서 아래의 화면같이 저 위의 탭들을 누르면 탭안에 있는 곳으로 스크롤이 이동되는 기능이었다. 아직 헤더높이를 계산하지않아서 제목이 보이지않지만 헤더가 없으면 브랜드이름있는 부분이 헤더의 밑으로 오게되는 것이다..