React11 React Hook Form 이해 설명form 을 다룰 때 사용하는 라이브러리로 최적화, 유효성 검증, api 등 유용한 기능 등을 제공합니다.controlled/uncontrolled components 란uncontrolled components: 값이 DOM에서 관리되는 컴포넌트로, React 상태와 별개로 DOM 자체가 입력값을 보관하여 리렌더링이 최소화되는 방식의 컴포넌트controlled components: 값이 React 상태로 관리되는 컴포넌트로, value와 onChange 이벤트를 통해 실시간으로 상태가 제어되는 방식의 컴포넌트주요 기본 기능1. 최적화React Hook Form 는 주로 uncontrolled components 를 사용하여 불필요한 리렌더링을 방지하고 직관적인 api 를 제공하여 효과적으로 로직을 .. 2024. 11. 2. [React] 지나친 추상화 및 파일 분리 시 주의점 설명평소 최대한 코드를 분리하여 각 코드/파일의 기능을 최소화하여 형태와 기능을 한눈에 파악할 수 있게 구성하는 방식으로 개발해왔는데최근 코드 리뷰 중 지나친 추상화 및 코드/파일 분리로 오히려 로직의 흐름을 따라가기 힘들다는 조언을 받아 수정하면서 배운 내용을 정리하고자 한다.주의점1. 복잡한 구조로 인한 가독성 저하지나치게 많은 파일과 추상화된 컴포넌트를 생성하면, 코드가 여러 레이어로 나뉘어 복잡해지며 직관적으로 요소의 스타일이나 기능을 파악하기 어려워지기 때문에 이해하는 데 오히려 시간이 많이 걸릴 수 있습니다. 예를 들어 작은 수정사항에도 여러 파일을 확인해야 할 수도 있습니다2. 불필요한 코드 중복과 비효율성모든 상황에 맞추어 사용할 수 있는 범용적인 컴포넌트를 만들려고 하면 실제로 필요 이상.. 2024. 11. 2. [React 18. 2] 공식 문서 훑으면서 몰랐던 부분 찾아보기 React 애플리케이션의 성능 측정을 위해 사용되는 컴포넌트 각각의 컴포넌트가 얼마나 자주 렌더링되는지, 렌더링에 얼마나 시간이 걸리는지 등을 측정할 수 있습니다. react-dev-tools 에 profile 탭에서 성능 관련 정보를 확인 할 수 있다. Props id: id onRender: (param) => {} param id: 방금 커밋한 트리 id의 문자열 소품입니다. 이를 통해 여러 프로파일러를 사용하는 경우 트리의 어느 부분이 커밋되었는지 식별할 수 있습니다. phase: "mount", "update"또는 "nested-update". 이를 통해 트리가 처음으로 마운트되었는지 아니면 소품, 상태 또는 후크의 변경으로 인해 다시 렌더링되었는지 알 수 있습니다. actualDuration:.. 2024. 1. 4. 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. React + ts 정적 파일 저장 위치와 기준 React + ts 정적파일 저장위치와 기준 설명 react + ts 로 개발 중 공공 API 에 사용되는 도시 코드를 정적 파일로 저장해야 하는 상황에서 두 가지 고민이 생겼다. 어디에 저장할 것인가? (public 디렉토리, src 디렉토리 ) 확장자(ts,js,json ...)는 어떤 것으로 할 것인가? 1. public 폴더와 소스코드 폴더에서의 정적 파일 처리의 차이점 react 로 개발하면서 정적파일을 저장하는 곳을 크게 public 폴더와 기타 src 같은 소스코드 폴더 (혹은 소스 코드 내?) 두 가지로 나누어 생각 할 수 있고 이 두 방식은 분명한 차이가 존재한다. 1.1 public 폴더 저장한 파일은 빌드 후에도 애플리케이션의 루트 디렉토리에 그대로 유지된다 이 폴더에 저장된 파일은 .. 2023. 11. 6. 배열의 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. 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. 이전 1 다음
