{assistantList?.data.map((assistant: ResGetAssistantListDataType) => ( { console.log('click chatbot ::: ', assistant); setCurrentAssistant(assistant); }} > {assistant.name} ))} 이렇게 하니까 이유 모를 클릭 이벤트가 먹지 않았다. 뭐가 잘못되었는지 살펴보다 uuid를 assistant.id로 변경하니까 문제가 해결되었다, uuid() 는 컴포넌트가 리렌더링될 때마다 새로운 값이 생성되므로, 리액트가 각 리스트 아이템을 동일한 아이템으로 인식하지 못할 수 있다는 것. 이로 인해 불필요한 리렌더링이 발생하고, 상태가 제대로 유지되지 않을 수 있다. 리..
실무를 하다가 건물을 클릭했을 때 webGL에서 카메라가 해당 건물로 줌인되는데 줌인이 끝나면 그 건물에 대한 정보가 담긴 모달창이 뜬다. 카메라가 움직이는 몇 초 사이에 건물을 여러번 클릭하면 해당 함수가 중복적으로 일어나 모달창이 꺼졌다 켜졌다하는 문제가 발생했다. 여기서 디바운스 라는 기술을 적용해 보기로 했다. debounce의 일반적인 뜻은 전자 회로 스위치의 신호 이상 상태에서 왔다. 전자 회로 스위치를 눌렀다가 떼는 과정에서 전압이 불규칙적으로 들어거 전류의 흐름이 비정상적으로 일어나는 현상을 바운싱이라고 한다. 이런 비정상적인 흐름을 정상적으로 해주는 작업이 "디바운싱"이다. 해당 개념을 웹으로 가져와 예를 들어보면 우리는 어떠한 input창을 칠 때 혹은 버튼을 누를 때 의도치 않게 서버..
React에서 props는 읽기 전용(read-only)이다! 따라서 직접 수정할 수 없는데 이를 직접적으로 변경하려고 했기 때문에 발생했던 에러! React는 단방향으로 데이터가 흐른다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하고 자식 컴포넌트에서는 해당 데이터를 사용하거나 렌더링 해준다! 만약 자식 컴포넌트에서 props를 변경하기 원한다면 해당 객체를 수정할 수 있는 state를 사용해서 setState로 state를 변경해주어야 한다.
React에서 state 지연 초기화란? useState에 초기값을 전달할 때 해당 값을 항상 생성되지만 react는 첫 번째 렌더에만 그 값을 사용한다. 문자열을 초기값으로 전달할 때 등과 같은 경우에는 문제가되지 않지만 state를 복잡한 값으로 초기화할 필요가 있다. 그런 상황에서 useState의 초기값 자리에 함수를 전달할 수 있따. 그러면 react는 컴포넌트가 마운트 됐을 때만 함수를 호출한다!! 투두리스트를 작성할 때 아래와 같이 연산을 통한 state 초기 값을 주었다. const [todoList, setTodoList] = useState( JSON.parse(localStorage.getItem("todolist") ?? "[]"), ); 지금은 그렇게 엄청 복잡한 연산은 아니지만 ..
