React 썸네일형 리스트형 useMemo React의 useMemo는 함수 호출 결과를 메모하는 데 사용되는 hook이다. 불 필요한 재 렌더링 횟수를 줄여주고 React 앱의 성능을 최적화하는 데 자주 사용된다. useMemo를 사용하면 React는 종속성 중 하나가 변경된 경우에만 메모된 값을 다시 계산한다. 종속성이 변경되지 않은 경우 React는 다시 계산하는 대신 이전에 계산된 값을 반환한다. 이렇게 하면 상당한 처리 시간을 절약하고 응용프로그램의 전반적인 성능을 항상 시킬 수 있다. useMemo는 메모할 값을 반환하는 함수와 종속성 배열의 두 가지 인수를 사용한다. 종속성이 변경될 때마다 함수가 호출되고 결과가 메모화되어 반환된다. function sum(a, b) { return a + b; } useMemo를 사용하여 이 함수의.. 더보기 HOC(Higher-Order Component) HOC(Higher-Order Component)는 컴포넌트 로직을 재사용할 수 있게 해주는 패턴이다. 간단히 말해서 고차 컴포넌트가 컴포넌트를 가져와서 기능이 추가된 새 컴포넌트를 반환하는 함수이다. HOC는 원래 컴포넌트를 래핑하고 일부 추가 props를 제공하거나 해당 동작을 수정한다. 예를 들어 API에서 일부 데이터를 액세스해야 하는 컴포넌트가 있다고 한다면, 여러 컴포넌트에서 API 요청을 처리하는 코드르 복제하는 대신 컴포넌트의 props로 데이터를 가져와 데이터 가져오기 논리를 사용한 새로운 컴포넌트를 반환하는 HOC를 만들 수 있다. HOC는 코드 재사용, 렌더링 제어, props 조작 등 다양한 용도로 사용할 수 있다. 재사용 가능한 구성 요소를 만들고 기존 구성 요소의 기능을 향상시키.. 더보기 React에서 html과 css 추출하기 운영 업무 중에 퍼블리셔 산출물에 대한 요청을 받았다. 사실 우리 프로젝트가 너무 심각하게 엉망이었던지라 프로젝트 도중 퍼블리셔가 런을 했었다. 거기에다가 디자이너 역시 중간에 이탈했다. 그러다 보니 퍼블리싱이 진행되지 못했고, 심지어 진행됐던 퍼블리싱 소스 역시 디자이너가 그만두게 되면서 디자인이 바뀌어버리는 바람에 쓸모없게 됐다. 결국 프론트 개발자인 내가 figma를 기준으로 React에서 퍼블리싱을 해가며 개발을 해야 했다. 그러다 보니 당연히 제출해야 할 퍼블리셔 산출물이 없을 수밖에 없었다. 결국 내게 이 것을 요청했고, 나는 React에서 추출하는 방법으로 진행해 보겠다고 답을 했다. React는 가상 DOM을 사용하기 때문에 그냥 html과 css를 추출하는 게 쉬운 것이 아니다. 그래서 .. 더보기 렌더링 된 후 특정 엘리먼트 접근하기 (후처리하기) 이번에 작업을 하는 중에 이벤트 게시판의 링크 기능에 대한 수정 사항이 발생했다. 지금 내가 개발하고 운영하고 있는 서비스의 경우 애플리케이션이기 때문에 일반 브라우저 환경의 웹과 다르다. 우리는 유니티 환경의 웹뷰를 사용하고 있기 때문에 그렇다. 그러다 보니 링크를 사용하는 경우에 앱의 웹뷰에서 곧장 그 링크로 접근해 버리기 때문에 기존의 우리 웹뷰 화면으로 돌아올 길이 없게 되었다. 그래서 결론적으로 새 창을 띄워 링크의 창이 종료될 때 원래 우리 화면으로 돌아오도록 구현해야 했다. 그런데 문제는 브라우저에서 사용하는 새 창을 띄우는 방식이 그 웹뷰에선 적용되지 않는다는 것이다. _black 옵션을 추가하거나 window.open을 이용해서 해봐도 새 창으로 화면을 열지 못했다. 링크를 클릭하는 이벤.. 더보기 Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이다. Fragments를 통해 DOM에 별도의 노드를 추가하지 않고 여러 자식 컴포넌트를 그룹화할 수 있다. return ( ) 아래와 같은 예시가 있다고 하자. function Table() { ... return ( ) } function Column() { return ( Hello World ) } 이 Table 컴포넌트가 렌더링 된 HTML이 유효하려면 Column 컴포넌트는 td 엘리먼트만 반환해야 한다. 만약 div 엘리먼트로 여러 td 엘리먼트를 감싼다면 렌더링 된 HTML이 유효하지 않다. 출력결과 아래와 같을 것이다. Hello World Fragments는 이 문제를 해결해 준다. Column을 Fragments를 사용.. 더보기 Ref 전달하기 React에서 forwardRef는 부모 컴포넌트에서 자식 컴포넌 중 하나로 ref를 전달할 수 있는 고차 컴포넌트이다. React 라이브러리가 아닌 외부 라이브러리나 ref가 필요한 DOM 요소를 사용하는 컴포넌트를 만들 때 해당 컴포넌트에 ref를 전달해야 한다. 그러나 ref를 자식 컴포넌트에 직접 전달하려고 하면 React는 '함수 컴포넌트에 ref를 지정할 수 없습니다.'라는 에러를 표시한다. 여기서 forwardRef를 사용할 수 있다. 참조를 받아들이고 자식 컴포넌트로 전달하는 새로운 컴포넌트를 만드는 방법은 아래와 같다. 먼저, forwardRef를 사용하려면 props와 ref라는 두 개의 파라미터를 사용하는 함수 컴포넌트를 만들어야 하고, 컴포넌트에서 ref 파라미터를 사용하여 자식 컴.. 더보기 Error Boundary 이전 프로젝트를 하면서 가장 아쉬웠던 부분이 바로 이 에러 바운더리이다. 책임 프론트 개발자분이 이 영역을 개발해 주셨는데, 지금 와서 보니 아쉬움이 너무 많다. 좀 더 세분화해서 각각 다른 화면을 제공하거나 다시 시도하는 버튼을 제공했더라면 훨씬 좋은 UX를 제공할 수 있었을 것 같다. 에러 바운더리는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트이다. 에러 경계가 렌더링 도중 생명주기 메소드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다. 과거에는 컴포넌트 내부의 자바스크립트 에러를 정상적으로 처리할 수 있는 방법이 없었는데, 에러 바운더리를 설정해 주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 .. 더보기 useEffectEvent useEffectEvent는 React 18에서 도입된 새로운 훅 중 하나이다. 이 훅은 useEffect와 유사하게 작동하지만 DOM 이벤트 핸들러를 등록하고 해제하는 작업을 간편하게 수행할 수 있도록 도와준다. useEffectEvent를 사용하면 DOM 이벤트 핸들러를 등록하고 해제하기 위해 매번 useEffect를 사용할 필요가 없어진다. 이는 코드를 더 간결하고 가독성 있게 만들어주며 불필요한 코드 반복을 줄여준다. useEffectEvent의 구조는 다음과 같다. function useEffectEvent(target, eventName, handler, options) { useEffect(() => { target.addEventListener(eventName, handler, optio.. 더보기 이전 1 2 3 다음 목록 더보기
