uni's code uni's code

들어가며 코드를 작성하는 것은 개발자로서 당연한 업무이다. 이때 코드를 작성할 때의 목표는 원하는 기능의 구현 일 것이다. 그렇게 기능 위주로 작성하다보면, 문득 “코드를 잘 만들었는가” “다른 사람이 보았을 때, 이해할 수 있는 코드를 만들었는가”에 대한 고민이 생기기 마련이다. 나만 알아볼 수 있는 코드는 다른 동료들과 미래의 나에게 곤란하게 하는 상황을 초래하고, 사이드 이펙트 및 레거시의 우려가 남아있기 때문이다. 리액트는 컴포넌트로 구성된 라이브러리이다. 간단한 프로젝트면 컴포넌트 설계에 대해서 깊게 고민하지 않아도 되겠지만, 규모가 어느정도 있는 프로젝트를 수행할 경우 비즈니스 로직이 더해진 다양하고 복잡한 컴포넌트는 수정하기 힘들어질 수 있다. 그래서 리액트의 코드를 잘 작성하기 위해서는 컴..

1. 사용 이유 결론은, React.memo, useMemo와 useCallback은 react의 성능을 향상(불필요한 렌더링 또는 변수, 함수 호출 방지)이 목적입니다. * React.memo는 HOC이고, useMemo와 useCallback은 hook입니다. 컴포넌트가 렌더링이 되면, 선언된 함수형 컴포넌트들 안에 있던 변수, 함수도 다시 정의되고, 사용됩니다. 또한, 컴포넌트는 자신의 state나 부모 컴포넌트로 부터 받은 props가 변경, 혹은 부모 컴포넌트가 리렌더링될 때마다 리렌더링됩니다. 그래서 재렌더링의 작업이 많아질 경우, 불필요한 함수 혹은 변수가 호출될 수 있습니다. → 특정 컴포넌트, 함수와 변수(값)을 메모이제이션하게 만들고 싶을 경우, React.memo, useMemo와 u..

1. 전반적인 구조 ts에서 주로 children component를 props를 넘길때, 자주 사용하는 type 종류와 차이에 대해 알아보겠다. 자주 사용했던, JSX.Element, ReactNode, ReactElement가 있는데 이들의 관계는 간단하게 아래 사진과 같다. [사전 지식] 1) 클래스형 컴포넌트는 render 메소드에서 ReactNode를 리턴 2) 함수형 컴포넌트는 ReactElement를 리턴 3) jsx로 작성된 코드를 babel을 통해 자바스크립트로 변환을 하면, React.createElement()로 나타낸다. 변환 전) const example = () => { return hello, world } 변환 후) const example = () => { return /*..

오늘은 react의 hoc 패턴에 대해 알아보겠습니다. 1) hoc란? hoc는 high order component의 약자로써, 고차컴포넌트라고 합니다. 쉽게 말하면, 다른 컴포넌트(=자식)를 감싸는 wrapper 컴포넌트(=부모)라는 뜻입니다. 리액트 공식 문서에 따르면 hoc를 사용하는 이유는 횡단관심사의 분리 입니다. 횡단관심사는 Cross-Cutting concern이라고 합니다. 하나의 컴포넌트만 가지고 있는 관심사를 넘어서 여러 컴포넌트에서 가지고 있는 공통의 관심사라는 의미입니다. 예를 들어, 각 페이지 별 유저에 대한 권한을 검사해 검증을 하는 기능이 공통적으로 가지고 있다고 합시다. 이러한 권한 검사가 공통의 관심사가 됩니다. 이러한 페이지 컴포넌트를 자식 컴포넌트로, 검증하는 컴포넌트..