리액트3 [기술 면접 스터디-8일차] 순수함수 / state와 props에 대해 1. 순수 함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 💡 순수함수는 항상 동일한 input에 동일한 output이 나와야 하고, 또 외부의 상태를 변경하거나, 외부 값을 참조하지 않고 내부에서만 값을 변경하여 프로그램의 상태를 직접 변경하지 않도록 합니다. 리액트는 컴포넌트를 엄격하게 순수함수로 작성하도록 설계 하였습니다. 이렇게 함으로서 코드가 복잡해 지더라도 독립성을 유지할 수 있고, 순수함수로서 결과를 예측 가능하여 예상지 못한 사이드 이펙트나 버그를 방지할 수 있고, 코드의 의도를 명확히 파악 가능하므로 유지 보수성이 높아지고, Test하기 쉽습니다. 또 컴포넌트가 순수함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있습니.. 2023. 7. 28. [React] UUID - Date.now(), random()없이 고유한 key값 생성하기 리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui.. 2022. 11. 6. [React]리액트(React)에서 벡터이미지(SVG)사용하는 방법 벡터 이미지(SVG) 장점 - SVG : XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다. 간단하게 코드로 이루어진 이미지다. - 그밖에 벡터 파일 : ai, pdf, eps 등 - 파일 용량이 작다. - 벡터 형식으로 무한한 확장이 가능하다(고화질, 크기와 해상도에서 자유롭다) - CSS를 통해 스타일링 등 변경 조작 등이 가능하다. 벡터 이미지(SVG) 단점 - 디테일한 사진 작업에는 부적합 하다. 픽셀 수가 적기 때문에 비교적 간단한 디자인의 로고나 아이콘, 일러스트 등에 적합하다. (사진보다는 그래픽, 사진일 경우 JPEG 등이 더 적합) - 호환성 문제.. 2022. 10. 30. 이전 1 다음
