Today I learned!46 [HTML+React] contenteditable 속성 contenteditable 속성 html속성 중 해당 요소를 편집할 수 있는지 나타내는 열거형 속성인데, true면 해당 속성의 값을 편집할 수 있다. 코드펜에서 contentEditable 아래 div요소를 클릭 시 focus되면서 수정이 가능함을 알 수 있다. See the Pen Untitled by Yunjin Lee (@sweesweett) on CodePen. 리액트에서 사용 시 contentEditable 속성을 추가했을 시, input처럼 변경사항을 onChange 이벤트 함수로 state로 관리할 수가 없다. 그리고 속성을 추가했을 시 아래와 같은 경고가 뜨게 된다. 이 때 contentEditable을 사용하면서 경고표시를 안나오게 하고싶다면 해당 요소에 suppressContentE.. 2023. 11. 9. [React] useImmer로 state 업데이트 하기 기존의 state 객체 업데이트 state 객체를 업데이트 할 때, 중첩된 객체일 경우 얕은 복사가 되기 때문에 전개 연산자를 사용해 객체를 복사 한 후 업데이트를 해야한다. 예를 들면 기존 객체가 이런식이라고 치면 const initialState={ name:'yoon', information:{ age:24, university:'hangook', major:'economy' } } 기존에서 major의 값을 업데이트 하려고 할 때 setState({ ...obj, information:{ ...obj.information, major:'computer-engineering'} }) 이런식으로 처리를 해야한다. useImmer를 사용하면 중첩된 객체의 값을 직접 변경할 수 있는 것 처럼 보이기 때문.. 2023. 8. 10. [React] 모달 영역 밖 클릭 시 모달 닫히게 하기 공부를 하던 중 모달 영역 밖 클릭 시 모달을 닫히게 하는 방법이 내가 쓰던 방법과 라는 방법이 있다는 걸 알게 되었다. 기존에 쓰던 방법은 아래와 같다. 기존 방법 빈 div 태그에 onClick이벤트 활성화 const App=()=>{ const [ModalOpen,setModalOpen]=useState(false) return ( {modalOpen&&}) )} // 모달 컴포넌트 const Modal=({setModalOpen})=>{ return( setModalOpen(prev=>!prev)}/> ) } css .bg{ position:fixed; top:0; right:0; bottom:0; left:0; /* top:0,right:0,bottom:0,left:0을 하면 화면 꽉차게 된다*.. 2023. 8. 2. [JS]제너레이터 아래의 문제를 풀어보다가 검색을 통해 알아보았다. 제너레이터는 여러 개의 값을 필요에 따라 하나씩 반환할 수 있다. 문법 구조 제네레이터 함수는 function 뒤에 *를 붙여 표기한다 function* function* thisIsGenerator(){ yield 1 yield 2 yield 3 return 19 } 일반 함수와 동작 방식이 다르며, 함수를 호출할 시 코드가 실행되는게 아니라 "제너레이터 객체"가 반환된다. next()를 통해 값을 가져올 수 있는데, next() 메서드를 호출할 때 가장 가까운 yield문을 만날 때 까지 실행이 계속 된다. 이후 yield문을 만나면 멈추고 value값이 반환된다. next()는 항상 아래와 같은 형태의 객체를 반환한다. {value:3, done:f.. 2023. 6. 25. 이전 1 2 3 4 ··· 12 다음
