typescript16 [ 리액트(React) ] Higher Order Component 사용하기 📍 Higher Order Component 사용하기 나는 고차 컴포넌트를 즐겨 사용하지 않지만, React로 작업을 하다 보면 특정 상황에서 고차 컴포넌트를 사용하면 적합한 경우가 종종 있다. (물론 고차 컴포넌트 이외에도 효율적인 접근방법이 있지만, 여기서는 고차 컴포넌트를 사용한다고 가정하자.) id, name, title가 담긴 리스트 타입의 values는 고차함수인 map method를 통해 컴포넌트()를 하나씩 렌더링하고 있는 상황이었다. 여기서 컴포넌트 내부에는 공통적으로 useState가 주입 되어야하는 상황이다. 여기서 나는 HOC를 사용하여 해결했다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술인데, 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 나만의 .. 2023. 4. 13. [ 타입스크립트(TypeScript) ] Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 📍 Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 typescript로 작업하다 다음과 같은 오류를 마주했다. 오류가 발생한 원인은 getListHref를 props로 내려준 위치가 잘못되었기 때문인데, 바로 {...props} 앞에 선언했기 때문이다. 하단의 AS-IS코드를 살펴보면 {...props} 앞에 getListHref를 선언했는데, 이것은 의미가 없다. 왜냐하면 ...props로 내려오는 getListHref을 최종적으로 적용하기 때문에 처음에 선언한 getListHref를 항상 override하기 때문이다.이럴 때는 TO-BE 코드처럼 내가 적용하고 싶은 getListHre.. 2022. 12. 28. [ 타입스크립트(TypeScript) ] 핸들러 함수내부에서 중복으로 사용되는 함수 리팩토링하기 📍 핸들러 함수 내부에서 중복으로 사용되는 함수 리팩토링 하기 React로 컴포넌트가 아닌 컴포넌트 내부에서 onClick시 동작하는 handler함수를 만들다 보면, handler 함수 내부에서 사용되는 함수를 조건으로 분기할 때 해당 함수가 중복으로 사용하는 경우가 종종 있다. 이번 포스팅은 애자일 소프트웨어 개발 방법의 하나인 페어 프로그래밍(Pair programming)으로 작업을 하다가 네비게이터(navigator)를 맡고 계신 헤일리가 발견해주신 케이스인데, 조건에 의해 인자 값이 바뀌어도 함수는 동일하게 사용할 때 중복되는 코드를 어떻게 하나로 합쳤는가에 대해 작성해보려 한다. 하단 코드는 리팩토링 전 clickEventHandler 함수의 코드이다. 이 코드로 컴파일하는데 에러는 없지만 .. 2022. 9. 19. [ 리액트(React) ] 불필요한 prop drilling 제거하기 📍 불필요한 prop drilling 제거하기 React에서 페이지 내부에 2~3개의 컴포넌트를 선언하며 데이터를 props로 전달하는 경우가 있을 것이다. 이번 글은 한 페이지 내에 컴포넌트 3개(A -> B -> C)를 선언하여 단순히 props로 전달만하는 B컴포넌트의 prop drilling을 어떻게 해결했는지 알아보자. 우선, React를 다뤄 본 개발자라면 prop drilling에 대해 한 번쯤은 들어봤을 것이다. prop drilling이란, props를 이용해 자식 컴포넌트로 데이터를 내려줄 때 모든 레벨에서 같은 데이터가 전송되는 상황을 말한다. 규모가 작을 때 prop drilling은 빠르고 쉽게 데이터를 전송할 수 있고, 구현 방법이 쉽고, props로 전달된 데이터의 상태 변경 .. 2022. 7. 27. [ 타입스크립트(TypeScript) ] query문의 value값에 key값과 동일한 값이 들어가있을 때 📍 query문의 value값에 key값과 동일한 값이 들어가있을 때 본인인증 기능을 구현하던 중 query에 key1=value1&key2=value2값이 추가된 상태로 다른 페이지를 방문하고 마지막에 query문을 변수로 사용하려고 할 때 겪었던 일이다. 당시 URL은 http://localhost:3001/foo/bar?returnUrl=returnUrl=/foo&id=baz와 같았는데 query문을 분석하면 returnUrl=returnUrl=/foo가 한 묶음 id=baz가 한 묶음인 총 2개의 query가 나왔다. 두번째 query값은 별 이상이 없었으나, 첫번째 query가 이상했는데, 바로 첫번째 query의 key값인 returnUrl이 value값에도 들어가있다는 점이었다. 당시 va.. 2022. 7. 12. 이전 1 2 3 4 다음
