(수근수근)

1편에서 pure component에 대해서 이야기 했다. pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서 설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다. 리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다. React.memo React.memo pure component를 최적화하는 escape hatch function Decoration() { return ( ⛵️ ); } const PureDecoration =..

최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고 좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다. 일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까? 최적화 툴이 만들어진 이유는 다음과 같다. 리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자! The Basic rule 모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다. 따라서 ..

Async Effect Gotcha gotcha : 프로그래밍에서 문제는 문서화된 대로 작동하지만 호출하기 쉽고 결과가 예상치 못하거나 불합리하기 때문에 직관에 반하고 실수를 거의 유발하는 시스템, 프로그램 또는 프로그래밍 언어의 유효한 구성입니다. 모두 알다시피, await키워드를 사용할 때, async함수 내부여야만 사용할 수 있다. 리액트를 개발하면, useEffect내부에서 비동기 함수를 사용해야하는 일이 꽤나 빈번하다. 특히 컴포넌트가 mount될 때, api를 불러오고 싶은경우가 많을 것이다.(react query, swr을 처음부터 쓰면, 알아서 해줍니다..) 예를 들어보자, React.useEffect(async () => { const response = await fetch(ENDPOI..

문제 - 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감 - locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음 해결방법 - datepicker에서 열어둔 props의 customInput을 활용한다. - 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용 (https://github.com/text-mask/text-mask/tree/master/react) 필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함) - locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다. import ReactDatePi..

Narrowing narrowing 타입을 좁혀나간다 이런 의미같다.. 살펴보자 해당 장에서 타입스크립트가 제공하는 (자바스크립트가 제공하는 키워드이기도 하지만..? 이를 타입스크립트는 narrowing용으로 사용도 하는 것 같다.) Type guards들에 대해서 하나씩 알아보자! 우선 첫 번째 예제를 하나 보여주는데 아래와 같다 function padLeft(padding: number | string, input: string) { if (typeof padding === "number") { return " ".repeat(padding) + input; } return padding + input; } 위의 함수를 보면 일단 자바스크립트 코드처럼보인다. 이 것이 요점인데, 타입스크립트는 타입안정..

Everyday Types 배열 Array vs number[] 두개의 차이점을 이야기하자만, 전자는 generic syntax고, 후자는 shortand구문으로 제너릭이 필요한 경우 전자를 사용하면 된다. any 타입스크립트의 틀별한 타입으로, 타입 검사오류의 발생이 되지 않는다. any를 사용하는 경우 추가적인 타입검사 자체가 비활성화되며 보통 굳이 긴타입으로 정의하는 것이 비효율적일 때 사용한다. noImplicitAny 설정을 켜놓는 경우는 any를 사용하는 경우 오류를 발생시킵니다. (설정하기 나름이다…) 변수에 대한 타입 표기 아래와 같다 간단.. const name : string = “Mercury” 함수 함수의 주요목적이 입출력인 것처럼 타입스크립트도 입출력의 타입을 지정할 수 있다. 매..