trouble shooting12 [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 #12] HTML - <figure> 태그는 언제 써야 할까요. 오늘 회사에서 옆 자리 동료가 이미지 관련 태그를 감싸는 태그로 태그를 사용한 것을 보았습니다. 저는 이때까지 그냥 태그로 태그를 감쌌는데 오랜만에 기억 속에서 잊혀졌던 태그를 봤습니다. 저는 태그는 그 안에 태그와 태그를 넣었던 걸로 알고 있었습니다. img에 대한 설명으로 figcaption 태그를 추가하는 것입니다. 근데 단순한 아이콘이나 작은 이미지에도 모두 figure 태그로 감싸도 되는 것일까 하는 의문이 들었습니다. 조금 구글링 해보니 figure 태그가 semantic tag 로써 활용된다는 것입니다. 그래서 저는 계속 궁금증과 의문을 가지면서 구글링을 더 많이 했습니다. 최종적으로 figure 태그는 메인 기능과는 독립적으로 옵션적인 기능으로써 활용된다고 합니다. 다시 말해서 문서의 흐름.. 2022. 10. 5. [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. 이전 1 2 3 다음 반응형