반응형 개발 프레임워크/Next.js24 [Next.js] Warning: A component is Changing an uncontrolled input to be controlled Error [React] 경고: 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 에러 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 기본적으로 말 뜻대로 react 구성요소가 제어할 수 없는 (선언되지 않거나, 제어할 수 없는) 입력을 제어하도록 변경하고 있을 때, 나타나는 경고로 화면에 값이 표현되지 않거나 동작자체가 이상해질 때(체크 박스, 라디오 박스 등 개발자가 의도한대로 동작하지 않음)도 있는 반면에 동작은 정상적으로 되는데 콘솔창에 나타날 때도 있다. 에러가 발생하며 동작자체가 이상해질 경우 * 겪어본 해결방법 1. 사용하려는 값이 의도한대로 존재하는가? 확인해보기 내가 사용하고 제어하려는 값 (변수, state) 등의 값이 내가 의도한대로 들어가지 않았을 경우가 있다... 2023. 2. 9. useState로 배열, 객체의 값 변경(체크박스 구현) ReactNative, Nest.js 등에서 useState의 state, setState로 배열([]) 혹은 객체({})의 값 변경 배열의 값([]) 변경 배열의 값 변경에 실패하는 경우 const [checkList, setCheckList] = useState([]); ... /** * 체크박스 handler * @param e: React.ChangeEvent */ const onCheckHandler = (e: React.ChangeEvent) => { let changeList = checkList; // 배열의 주소를 공유하게 된다. changeList[Number(e.target.id)] = true; // 객체의 주소를 공유하기 때문에 원본의 내용도 함께 바뀐다. // setState는 .. 2023. 2. 8. [Next.js] Slug Next.js에서 동적 라우팅, 슬러그(Slug)의 사용 1. 슬러그 사용법 슬러그는 1. 슬러그:[slug], 2. 다중 슬러그 [...slug], 3. 옵셔널 슬러그 [[...slug]] 3가지 형태가 있다. 다중 슬러그와 옵셔널 슬러그에서 slug는 배열이므로 []안에 스프레드 연산자(...)을 이용하여 생성한다. 슬러그를 이해하기 위해 아래 예제를 보자 1. pages/post/create.js 2. pages/post/[pid].js 3. pages/post/[...slug].js /가 pages라고 되어있을 때, 1의 pages/post/create.js는 /post/create 경로와 일치한다. 2의 pages/post/[pid].js는 /post/1, /post/abc, 기타등등과 경로가 .. 2023. 2. 3. [Next.js] Routing_라우팅 Next.js에서는 File system을 기반으로 라우팅이 된다. File system은 pages 폴더 아래에 있어야 한다. 우선순위: src/pages { return router.push("URL"); }; re.. 2023. 2. 3. 이전 1 2 3 다음 반응형
