Develop+

리액트를 훅을 사용하다보면 useEffect와 useState만으로도 충분히 프로그램을 짤 수 있다. 그래서 useMemo, useCallback이라는 개념을 듣고 제대로 적용해 본 적이 없는 거 같다. 이렇게 작동하는 코드로 만족하는 것이 새로운 것을 배우려는 마음까지도 좁게 만드는 거 같아 useMomo와 useCallbak 에대해 공부해보고자 한다. 일단 useMemo, useCallback을 배우기 전에 알고가야 할 두 가지는, 함수형 컴포넌트도 "함수"라는 것이다. 함수가 실행될 때 내부에 있는 선언, 함수들이 매번 다시 선언이된다는 점이다. 그리고 컴포넌트는 state와 props가 변경될 때 마다 리랜더링 된다는 점이다. 그렇다면 리랜더링 될 때마다 내부의 변수선언, 함수들이 매번 다시 선언..

리액트 16.8v 이후부터 함수형 컴포넌트 내에서 hook을 사용할 수 있다. 클래스형 컴포넌트에서 라이프사이클을 이용하면서 여러 문제점들을 만났고, 리액트 팀에서는 그를 보완하기 위해 훅이라는 개념을 도입했다. 그렇다면 훅은 어떻게 구현될까? 가장 기본적인 훅인 useState에 대해 살펴보자. useState의 기본적인 문법은 const [variable, variableSetter] = useState(initialValue); 형식으로 useState의 파라미터로 초기값을 받고, value와 그 값에 유일하게 접근할 수 있는 setter를 반환한다. export function useState(initValue) { let value = initValue; return value, (nextVal..

자바스크립트를 타입스크립트로 마이그레이션 중 만난 에러, 타입스크립트에서는 사용할 변수의 타입을 지정해줘야한다. 기존 자바스크립트에서는 porpsType 등 플러그인을 사용해 Props의 타입을 지정해주기도 했지만 선택사항이었다. 타입스크립트에서는 받을 Props와 사용할 State에 대한 인터페이스 제너릭을 사용해 명시해 줄 것을 요구한다. Property '' does not exist on type 'Readonly & Readonly' > 위 링크를 참고하여 에러를 해결하였다. 타입스크립트는 런타임에서 날 에러를 컴파일타임에서 미리 잡아준다. 빨간 줄이 난 부분에 마우스를 올려보면 저러한 에러가 뜬다. 해결방안 Props와 State의 타입을 인터페이스로 선언하여 클래스 extends Compon..

마이그레이션에 들어가기 전 준비사항/알고가야하는 사항들! jsx 가 들어간 문법은 .ts가 아닌 .tsx로 확장자를 변환해줘야한다. 루트에 tsconfig.json 파일을 생성 해줘야 함 (대부분의 설정 오류들이 tsconfig.json을 수정하여 해결 가능하다.) .less 등 모듈을 declare 해서 타입을 지정해줘야지 사용할 수 있다. 오류 목록 Cannot use JSX unless the '--jsx' flag is provided 수정 파일 = ./tsconfig.js "include": [ "./src/**/*.ts" ] tsconfig.json 에서 "./src/**/*"로 설정되어있던 값을 "./src/**/*.ts"로 바꾸어 타입스크립트에서만 적용될 수 있도록 설정하면 에러 해결, 이..