React17 [Trouble Shootings #13] React - Fragment에도 key 속성 지정이 가능합니다! React에서 무분별한 div 태그 남용 방지를 위해 와 같은 React.Fragment 태그를 자주 사용합니다. 하지만 JS의 순수함수인 map 함수를 이용하여 리스트를 렌더링 할 때, key 속성을 unique 하게 잘 지정하는 것이 중요한데 다른 사람 코드를 보면 종종 프래그먼트의 경우 key 속성을 지정 못한다고 생각하여 의미없는 div 태그를 하나 더 만들어서 key 속성을 지정하는 것을 보았습니다. 하지만 그럴 필요가 전혀 없습니다. 현재 리액트에서 제공하는 React.Fragment 태그에 key 속성을 제공합니다. 물론 프래그먼트 축약 형태인 에 사용할 수는 없고 와 같은 형태에서 사용이 가능합니다. 물론 내부적으로 빠른 노드 검색 최적화를 위한 reconciliation 알고리즘이 적용되.. 2022. 10. 6. [Trouble Shootings #11] React - React.ReactNode vs. JSX.Element 타입 React에서 Layout 같은 Wrapper component를 만들 때, children의 타입을 지정해야 할 필요가 있습니다. 저는 보통 React.ReactNode나 JSX.Element 타입을 이용하였습니다. 아무 생각 없이 JSX.Element 타입을 이용하다가 어느 순간, 타입스크립트 에러가 발생하여 그때 그때 리액트 프래그먼트를 추가하여 여러 개의 child를 한번에 감싸서 넣었는데 생각보다 귀찮았습니다. 그래서 한번 보니깐 React.ReactNode는 JSX.Element보다 좀 더 넓은 집합의 개념으로 이해했습니다. JSX.Element 타입이 React.ReactNode 타입의 부분집합인 것 같습니다. React.ReactNode 타입으로 지정하면 JSX.Element[] 타입도 모.. 2022. 10. 4. [Trouble Shootings #10] React - 파일 업로드 로직 구현 시 발생 가능한 이슈 리액트에서 사진/파일 업로드 로직 구현 시 다양한 방식이 있습니다. 그 중 대표적으로 input type="file" 태그를 display:none; 처리하고 ref를 만들어 속성으로 추가한 뒤 업로드 버튼에 연동하는 방법이 있습니다. 이 때 input type="file" 태그에 onChange 이벤트를 추가하여 작업을 처리했지만 발생할 수 있는 이슈가 하나 있습니다. 사진/파일 업로드하고 해제 후 다시 동일한 사진/파일 업로드 했을 때 아무 작동도 하지 않는 경우가 있습니다. input onchange 이벤트 발생 후 input value 관련 ref.current.value 빈 문자열로 초기화하면 해당 이슈는 해결됩니다. 2022. 10. 1. [World Article #8] You’re overusing useMemo: Rethinking Hooks memoization - by Ohans Emmanuel React에서 useMemo 훅을 사용할 때 고려할 점이 있습니다. 무턱대로 memoization 캐싱을 위해 사용하는 것은 올바르지 않습니다. 우선 기본적으로 성능에 크게 영향을 미치지 않을 정도의 값이면 useMemo를 굳이 사용하여 공간 복잡도를 높일 필요는 없을 것 같습니다. 단순히 boolean 같은 primitive type value를 위해서 사용하는 것은 효율적이지 않고 서버로부터 data를 fetch 하는 것과 같이 객체 타입의 큰 규모의 타입은 data가 변경될 때마다 값을 갱신시켜주는 것이 좋아 보입니다. 또한 primitive type의 value는 객체처럼 참조 주소가 있어서 새롭게 만들 필요가 없어서 참조 주소는 변경되지 않습니다. 우선 기본적으로 코드를 구현하되 성능 이슈가 있.. 2022. 9. 23. 이전 1 2 3 4 5 다음 반응형