개발일지-에러핸들링7 React useEffect로 이벤트 핸들러를 부착했을 경우 상태값을 제대로 읽어오지 못하는 문제 문제가 된 코드 const FollowPointer = () => { const [cursorX, setCursorX] = useState(null); const [cursorY, setCursorY] = useState(null); // 마우스 커서 위치 기록 const mouseMoveHandler = (e) => { console.log(cursorX, cursorY); setCursorX(e.clientX); setCursorY(e.clientY); }; // 마우스 커서 위치 기록 useEffect(() => { window.addEventListener("mousemove", mouseMoveHandler); return () => window.removeEventListener("mousem.. 2021. 12. 14. CSS flex로 아이템들을 가운데 정렬 시도 우선 flexbox로 아이템들을 가운데 정렬하는 것은 간단했다 display: flex를 선언하고 justfy-content: space-between이나 center를 선언하면 아이템들이 가운데로 정렬된다. display: flex; flex-flow: row wrap; justify-content: space-between; // justify-content: center; .container { width: 30vw; height: 80vh; display: flex; flex-flow: row wrap; justify-content: space-between; // justify-content: center; > .card { margin: 10px; width: 100px; height: 150.. 2021. 11. 23. React 오류: Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). 요약 input value에 undefined가 입력됨 문제 원인 해당 컴포넌트는 props로 루트 컴포넌트에서 state와 state변경함수를 받아와서 input.value에 입력했음 해당 컴포넌트가 props로 받아온 state의 초기값은 undefined였음 해당 컴포넌트는 로드된 순간 state의 값을 state변경함수로 초기화하고 해당 값을 input.value에 입력함 state의 변경은 비동기적으로 이루어져서 컴포넌트가 state값이 초기화 되기 전에 input.value에 undefined를 입력하게됨 해결 방법 해결1 OR 연산자 추가 해결2 루트 컴포넌트에서 미리 초기화를 시키고 해당 컴포넌트로 state 전달 2021. 10. 24. React 오류: React Hook useEffect has a missing dependency: 'selectedItems'. Either include it or remove the dependency array. 문제 원인 1. react의 effect hook의 dependency 배열에 필요한 변수가 없을 때 발생하는 경고 export const Component = ({value, setValue}) => { useEffect(() => { setValue({...value, value2: 0}); }, []); }; > warning 발생 2. react의 effect hook 내부에서 참조형 변수를 사용하는 state를 변경할 때 발생하는 경고 const [state, setState] = useState({value1: 1, value2: 2}); useEffect(() => { setState({...state, value2: 0}); }, []); > warning 발생 문제 해결 방법 1 useE.. 2021. 10. 24. React 오류: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 발생 이유 라디오 버튼이나 체크박스 버튼의 checked 속성을 onChange 이벤트 핸들러로 바꾸지 않고 직접적으로 변경함 이 필드는 읽기 전용이며 이 객체는 실제로 값이 반영되어 있지 않음 문제가 된 코드 {array.map((el, idx) => { return ( )}} 해결 방법 방법 1 defaultchecked는 mutable이므로 이를 사용할 수 있음 방법 2 또는 태그 대신 태그와 CSS를 사용 방법 3 단순히 코드에 onChange={e => {}}를 입력하면 에러메시지가 사라짐 {array.map((el, idx) => { return ( {}}> )}} 2021. 10. 24. React 오류 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 메시지 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 해결책 react의 jsx 문법에서는 class="name"과 label for="name" 대신 className="name" label htmlFor="name"을 사용하기를 권장하기 때문에 나오는 경고 메시지 2021. 10. 24. 드롭다운 버튼과 리스트의 크기를 반응형으로 구현하기 드롭 다운 리스트를 구현 1. 상단부의 드롭 다운 선택버튼과 드롭 다운 리스트를 다른 컴포넌트로 분리 2. 상단부의 선택버튼은 반응형으로 크기에 따라 변하지만 하단부의 리스트는 반응형으로 크기가 변하지 않음 해결책 1 드롭 다운 리스트 CSS 수정 width: inherit; > 선택버튼과 리스트가 상속관계에 있지 않으면 사용 불가능 해결책 2 선택 버튼을 클릭하면 리스트의 Props에 자신의 width 값을 전달하고 리스트는 그 props의 width값으로 자신의 넓이를 설정 해결책 2-1 선택 버튼에 onClick={clickHandler} 부착 event.target 으로 클릭한 객체를 선택 > 이벤트가 발생한 객체를 선택 event.currentTarget > 이벤트 핸들러가 부착된 객체를 선택 .. 2021. 10. 24. 이전 1 다음
