Aaron[에런]/Trouble Shootings14 [Trouble Shootings #14] React - useState hook의 Lazy Initializing 이때까지 항상 습관적으로 React에서 useState 훅의 기본값을 그냥 넣어서 사용해왔습니다. 하지만 이전에 어떤 영상에서 useState 기본값으로 콜백 함수를 넣는 것을 본 적이 있습니다. 당시에 무거운 데이터 같은 경우에 최적화를 고려하여 콜백 함수로 넣을 수도 있다(?)로만 막연하게 잘못 인지하였습니다. 오늘 저녁 당시의 궁금증이 다시 상기되어 찾아봤습니다. 우선 결론적으로 useState 기본값으로 항상 해왔던 방식으로 원시값 ex) 문자열, 숫자, 불리언 등 을 세팅하거나 react-query로 서버 상태 관리하기 이전 방식인 useEffect 를 사용하여 api 초기 데이터를 넣을 수 있습니다. (물론 useEffect를 사용하면 초기에는 데이터가 없어서 깜빡거릴 수 있는데 스켈레톤이나 .. 2023. 1. 27. [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. 이전 1 2 3 4 다음 반응형