react9 React 에서 이벤트 위임 하지 않는 이유 상황 React 로 개발하던 와중 문득 기존에 개발하던 방식에 의문이 생겼다. 이벤트를 처리할 때 각 요소에 일일이 등록해서 사용했던 점이었다. (아마도 react 를 배우고 개발하면서 봐온 일반적인 코드들의 형태들에 익숙해진 것 같음) 어째서 바닐라 js 로 개발할 때처럼 addEventListener 를 활용한다거나 이벤트 위임하는 방식으로 처리하지 않는지 찾아보게 됐다. 해결 찾아보니 github 에서 비슷한 질문과 답변이 있었다. 답변 중 일부: React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level. (React는 클릭 이벤트 핸들.. 2023. 12. 22. React + Vite + ts 환경에서 path alias 설정하기 Vite 환경에서 path alias 설정하기 상황 Reaect + Vite + ts 환경에서 tsconfig 에 path alis 설정 후 정상적으로 인식하지 못해 Failed to resolve import "@styles/globalStyle" from "src\App.tsx". Does the file exist? 이런 오류메시지가 발생함 "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": ["./components/*"], "@api/*": ["./api/*"], "@hooks/*": ["./hooks/*"], "@assets/*": ["./assets/*"] } ... } 해결 방법 1. vite.config.ts 에서 a.. 2023. 11. 8. 배열의 index 와 key 의 관계 공식 문서 중 발췌 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. react 는 바뀐 document 를 비교해서 랜더링할때 변경내용을 적용한다. 반복해서 생성한 엘리먼트가 있다면 구분이 힘들기 때문에 구분을 위해 Key 를 사용해 구분해준다 이때 Key 값으로 배열의 인덱스로 적용 할 경우 배열의 길이가 변경될 때 배열의 인덱스는 변경되므로 Key 값으로 쓰는데 문제가 있다. 공식 문서에서 참고하라고 하는 블로그에서는 되도록 배열에서 고유한 값(ex: id) 을 활용하는 것을 추천하고 있다 ※ 고유한 값을 만들어 쓰는 라이브러리도 추천했다. 예외적으로 아래 3가지의 내용에.. 2023. 2. 28. react 에서 inline style 의 단점 직접 carousel 만들던 중 콘텐츠를 움직이기 위해 태그의 inline style left 속성을 변경하는 방법을 사용했었는데 리팩토링 하고자 자세히보니 불필요한 리랜더링이 있었고 찾아보니 react 에서 inline style 을 사용시 같은 값이더라도 리랜더링이 일어나 사용하지 않는 것이 좋고 styled-component 등을 활용하는게 좋다고 한다 3 줄 정리 간단하게 react 는 새로운 document와 기존 document 구조를 대조해서 리랜더링 여부를 판단 후 변경한다. js 세상은 {} !== {} 이 성립하며 inline style 은 객체형식이다 inline style 을 적용시키는 코드가 있다면 어떤식이든 리랜더링이 될 것이고 무의미하거나 불필요한 리랜더링일 가능성이 높으니 고.. 2022. 10. 12. 리덕스 관련 알아두면 좋은 내용 redux-action 액션 생성함수와 리듀서를 작성할때 간단하게 활용하는 라이브러리 시작하자마자 모르는 문법이 보여서 체크하고 감 객체 리터럴 표현을 반환하기 위해서는 함수 본문을 괄호 속에 넣음 params => ({foo: bar}) createAction() : 액션 생성 함수를 만들어주는 함수이다. handleActions() : 기존 switch 를 활용한 방법보다 효율적이고 가독성있게 리듀서를 작성할 수 있다. createAction() 을 활용하여 만든 액션 생성 함수는 액션 객체를 던져주는게 아니기 때문에 바로 dispatch 해서 사용이 불가능하고 redux-thunk 같은 액션 생성 함수를 dispatch 할 수 있게 만들어 주어야 편하게 바로 사용이 가능하다. 기존 쓰던방식 cons.. 2022. 5. 31. 개발 중 이슈 보고서 [4월 01일 ~ 5월 13일] 원래는 주마다 이슈를 정리하여 올리려 했으나 프로젝트 개발에 힘쓰느라 몰아 올리게됨 노력할예정 삽질 리스트 1. 웹팩 오류 상황 설명 : 어쩌다 그랬는지 심신미약 상태로 개발하던 중이라 정확히 기억나지는 않지만 이런 오류를 만났다. ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30 Module not found: Error: Can't resolve 'stream' in 'D:\react_file\Project\temp_porject\node_modules\jws\lib' > BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules .. 2022. 5. 13. Hooks Hook 을 제대로 알지 못하고 리액트 개발을 시작하는 것은 니퍼를 들고 나사못을 빼는 헛짓거리 일거 같아 확실히 정리하기 위해 적어두려함 Hook 이 무엇이냐? 기존 React 의 class 바탕의 복잡한 코드를 작성할 필요 없이 여러 React 기능을 functional component 에서 쉽게 사용 할 수 있게 해주는 것이 Hook 인 것이다. 중요한 부분은 functional component 에서 state 를 가질 수 있게 된 것과 기존의 React 에서는 class component, render(복잡한 라이프 사이클과 그에 대응하는 메서드들 ..) 이런 귀찮은 짓을 안하고 하나의 function 에서 모든 것을 할 수 있게 된 점 정도로 정리할 수 있을 것 같다. 중요 Hook 비구조화.. 2022. 2. 22. ref 를 알아보자 (ref DOM) ref 란? HTML id 를 사용하는것처럼 DOM 에 이름을 다는것처럼 프로젝트 내부에서 DOM 에 이름을 다는 방법이 ref (reference) 개념이다 DOM 을 꼭 직접적을 건드려야 하는 특수한 경우에 사용하는 것을 권장 특정 input d에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 개인적으로 jQuery 한창 쓸 때도 기본 js 방식으로 코드를 많이 짜서 id 를 쓰는 것이 익숙했는데 React 와서는 코드를 짜는 방법이 조금 달라 감이 잘 잡히지 않았던 경험이 있다. + DOM 에 관련있기도하고 React 를 이해하는데 클래스형 컴포넌트가 도움 될 것 같아 일단 클래스형 컴포넌트에서도 사용하는 방법을 적어둠 콜백 함수 를 통한 ref 설정방법 클래스 형 impor.. 2022. 2. 21. 전개연산자 (Spread Opertor) 리액트 공부중 코드중에 처음 보는 녀석을 발견했다. function reducer(state, action) { return { ...state, [action.name]:action.value } } ...state 이렇게 생긴 이 녀석의 이름은 전개 연산자 스프레드 연산자로도 불리는 듯하다. 그나마도 쉽게 이해되는 설명은 이것이었다 '스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.' 쉽게 말하면 spread 의 뜻처럼 배열, 문자열, 객체 등을 펼쳐서 쓴다는 의미다. 그러나 완벽히 이해가 되지 않고 왜 쓰는지, 어떻게 활용이 되는지는 찾아볼 필요가 있었다. 왜 사용하는가? 일단 불변성의 중요성을 알.. 2022. 2. 13. 이전 1 다음
