728x90 반응형 분류 전체보기145 [react] React에서 key의 역할과 컴포넌트를 다시 그리는 과정 발생한 이슈 팀 프로젝트를 진행하면서 key에 대해 간과하고 있던 점을 스스로 발견해버렸다. 그래서 기록을 남기고자 이렇게 작성을 하려고 한다. 나는 map을 사용할 때 key를 보통 map의 두 번째 인자인 index로 사용했다. 평소에는 문제가 되지 않았던 이슈가 이번 프로젝트에서는 이슈가 되어 돌아왔다. 제대로 정리하지 않으면 프로젝트를 할 때 헤맨다는 이유가 여기에서 나왔나 싶다,, 여러 들이 있고, 각각의 에는 삭제 버튼이 있다. 삭제 버튼을 클릭했을 때 클릭한 를 삭제하고 싶었다. 하지만 클릭한 가 삭제되지 않고, 다른 가 삭제되는 현상이 있었다. 왜 이러한 이슈가 발생한 건지 정리해보려고 한다. Key의 역할 공식문서에서는 key에 대해 이렇게 설명하고 있다. 그 중 위의 이슈와 관련성이 깊.. 2023. 2. 15. 파비콘 아이콘 생성하기(+아이패드) 파비콘 아이콘 생성하는 법 1. 아이패드를 사용해서 우선 원하는 아이콘을 그려주고, 배경 없는 png 파일로 저장한다. 2. 그리고 ico 파일로 변환하기 위해 아래의 웹 사이트를 사용한다. Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 3. 파일을 선택하고, Create Favicon을 클릭한다. Generate icons for Web, Android, Microsoft, and iOS (iPhone and.. 2023. 2. 14. [TS-오류] but has no corresponding defaultProps declaration react/require-default-props 아래 사진에서 onClick props를 선택적으로 입력할 수 있도록 ?을 붙여서 작성했었다. 이때 기본 값을 선언해주지 않아 발생된 오류다. 해당 오류를 해결하기 위해서는 아래의 코드처럼 규칙을 warn으로 변경하거나 해당 컴포넌트에게 defaultProps를 지정해줘야 한다. 방법 1(warn으로 변경) // .eslintrc.js "rules": { 'react/require-default-props': 'warn', } 방법2(defaultProps 지정) Button.defaultProps = { onClick: null, } 2023. 2. 14. [TS-오류] Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events div 태그한테 onClick 이벤트를 줘서 생긴 에러였다. div 태그는 non-interactive 한데 onClick은 interactive한 요소라고 에러를 내고 있었다. 그래서 div 태그한테 role=”none”라는 속성을 줬다. 그랬더니 오류는 사라졌다. 여기서 role=”none”은 적용된 요소의 기본 의미 체계와 필수 하위 요소를 제거해주는 속성이다. 2023. 2. 14. <div> 안에 text 가운데 정렬하는 법 flex, justify-content, align-items만 기억하면 된다! 한테 flex, justify-content: center, align-items: center 속성을 주면 손 쉽게 text를 가운데 정렬시킬 수 있다. 2023. 2. 13. 이전 1 ··· 23 24 25 26 27 28 29 다음 728x90 반응형