trouble shooting12 [Trouble Shootings #4] React - label과 input 연동 HTML 에서 label - input 연동을 위해서는 2가지 방법이 있습니다. 형태로 표현하는 방식과 이와 같은 방식이 있습니다. 개인적으로는 label 태그 안에 input 태그를 넣어서 감싸는 것을 좋아합니다. 불필요하게 id 값이 과다하게 늘어나면 유지보수하기 힘들어진다고 생각합니다. React 에서는 중복되는 속성을 피하기 위해 label 태그에 htmlFor 속성과 input 태그의 id 속성을 이용해 연동을 시킵니다. 하지만 저는 의문점이 생겼습니다. React가 탄생하게 된 배경 자체가 직접 DOM을 핸들링 하는 것은 꽤 무겁기 때문에 가상 DOM 이라는 Map (자료구조) 객체를 두고 이전 상태와 비교하여 갱신하는 형태인데 id 값을 직접 조작하면 DOM을 핸들링하는 것이기 때문입니다. .. 2022. 9. 22. [Trouble Shootings #3] React - module scss 이용 시 component prop으로 custom className을 넘겼을 때의 처리 회사에서 업무를 하다가 module scss 관련 트러블 이슈가 발생하였습니다. 자주 사용되는 재사용 가능한 컴포넌트를 하나 만들고 사용하고 있었는데 디자인 커스터 마이징이 필요하였습니다. 그래서 재사용 컴포넌트(자식 컴포넌트)를 사용하는 상위 컴포넌트에서 module scss를 import 한 styles를 이용하여 styles['module scss class 명'] 형태로 props을 넘겨서 하위 컴포넌트에서 styles[className(변수)] 형태로 처리하니 undefined로 class 명이 나오게 됩니다. 처음에는 module scss여서 해당 파일에만 scoped 되어 못 넘기는 건가 아니면 어디선가 중복되서 꼬인건가 고민이었습니다. 하지만 생각해보니 상위 컴포넌트에서 styles로 감싸.. 2022. 9. 21. [Trouble Shootings #2] React - 여러 이벤트 간의 관계 (feat. stopPropagation) 오늘 회사에서 작업을 하다가 구글링을 통해 잊어버렸던 JS 개념을 활용해 해결하였습니다. 사전에 퍼블리싱한 버튼이 있었는데 outer container에 button 클릭 이벤트 핸들러가 있고 그리고 position: absolute; 로 설정한 -, + 버튼이 각각 왼쪽과 오른쪽 끝에 붙어 있었습니다. 한 곳에 총 3개의 버튼이 있고 각각 3개의 이벤트 핸들러가 걸려 있어서 이벤트 버블링이 일어나면서 중복 발생하기도 하였습니다. 순서가 꼬이는 경우도 가끔 발생하여 이런 이슈를 어떻게 해결할지 구글링을 하였습니다. 사전에 이와 같은 방식으로 html, css 퍼블리싱을 하지 않았더라면 좀 더 나았을 것 같기도 한데 우선 해결이 필요합니다. 끝내 찾은건 event.currentTarget.stopPropa.. 2022. 9. 20. [Trouble Shootings #1] React - 콜백 함수 내부에서 여러 setState 함수 호출 시 업데이트 순서 에러 얼마 전 회사에서 작업을 하다가 onClick 같은 이벤트 핸들러 (콜백 함수) 내부에서 두 가지의 setState (setter) 함수를 호출시키는 작업을 했던 적이 있습니다. 사실 함수는 하나의 일만 수행하는 것이 기본적인 원칙이라 많이 들어서 제가 올바르게 코딩을 한 것 같지는 않았습니다. 하지만 의식의 흐름대로 하다 보니깐 그런 작업이 일어났는데 업데이트 순서에 대한 에러가 발생하였습니다. 아무래도 당연한 것이 useState 훅으로부터 반환되는 setter 함수는 비동기적으로 발생하는 것으로 알고 있습니다. 그래서 업데이트 순서가 제 생각대로 올바르게 동기식으로 이뤄지지 않는 것입니다. 구글링 해본 결과 즉시 실행 함수를 이용해서 각각 호출하면 된다 라고 하였지만 제 경우는 해결이 안되었습니다... 2022. 9. 17. 이전 1 2 3 다음 반응형