크롱의 Dev Log

2020년 12월에 번역된 글로 현재와 다른 내용이 있을 수 있습니다. 다음은 nextjs 공식문서의 nextjs api 레퍼런스 중 next/link에 대한 글을 번역한 것이다. nextjs.org/docs/api-reference/next/link next/link | Next.js Enable client-side transitions between routes with the built-in Link component. nextjs.org next/link 예제 앱 Hello World Active className on Link 읽기 전에, Routing Introduction을 읽어볼 것을 권한다. 클라이언트 사이드에서 경로간의 이동은 Link 컴포넌트(exported by next/link)..

리액트 컴포넌트와 숫자를 인자로 받아 숫자만큼 리액트 컴포넌트를 복제해서 반환하는 duplicate 함수를 만들었다. function duplicate(Component: JSX.Element, number: number) { return ( {Array.from({ length: number }).map((value, index) => ( ))} ); }그러자 JSX element type 'Component' does not have any construct or call signatures.ts(2604)라고 에러가 떴다. duplicate 함수의 인자로 리액트 컴포넌트를 만드는 consturctor를 넘긴 것이 아니라 만들어진 instance를 넘겨서 문제가 되었던 것이다. 아래와 ..

문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )}React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열은..

개발하던 중 위와 같은 에러가 떴다. 말 그대로 useEffect에 매개변수로 배열을 넘겨주겠다고 타입 선언을 해뒀는데 string이 넘어가서 생기는 에러였다. customized useEffect의 매개변수를 배열로 바꿔주니 문제 없이 잘 돌아갔다.