목록react (2)
언젠가는 펼쳐 볼 아카이브
# 우리 어디서 본적 있지 않나요🤔 리액트로 프로젝트를 개발하다보면, 크롬 개발자 콘솔창에서 자주 보이는 "warning" 친구가 있다. 경고문 예시 코드 import data from './data.json'; function App() { return ( {data.map((item) => { return ( {/* "p" 태그에 key값을 설정해 주지 않음*/} Name : {item.name}, Age : {item.age} ); })} ); } export default App; 바로 이 친구인데, 리액트 컴포넌트를 생성하는 방법 중 데이터 값을 불러와 반복문으로 child component를 생성할 때 key 값을 설정하는 걸 놓치면 생기는 warning 친구다. 프로젝트를 개발 하다보면 종종..
... const CommentItem: React.FC = ({ item, onDelete }) => { const handleDelete = () => { onDelete(item._id); }; ... 함수 컴포넌트를 React.FC 로 타이핑한게 눈에 들어옵니다. 이전에는, 암묵적인 children 및 숫자나 문자를 반환하면 에러가 발생하였는데 이제는 괜찮아 졌습니다. 그런데, 여전히 제네릭이라던가 defaultProps 는 개선이 안된 것 같습니다 . 그리고 오히려 저 코드가 더 읽기 어렵게 만들수도 있기에, 우리에게 친숙한 props 에만 타입을 명시해주는 형태로 작성하셔도 됩니다. :) 참고링크 : )https://www.totaltypescript.com/you-can-stop-hating..