React & TypeScript42

• 

  [React] Context API 정리 (Provider, Consumer, useContext) 개요대략적인 이해를 하고 사용했던 것 같은데, 좀 더 명확하게 정리하고자 글을 작성한다.CRA 기반으로 example 코드를 작성하였다.최적화를 위한 click event hanlder 함수는 일부러 따로 작성하지 않았다. useCallback, useMemo 같은 최적화 함수도 기재하지 않았다. (실전 코드에서는 리렌더링 막기위해서 당연히 써야 한다.) Context API 간단 정의Context객체에는 Provider, Consumer 컴포넌트가 포함되어 있습니다.Provider: Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 컴포넌트Consumer: Context 변화를 구독해 변화시 재 렌더링하는 컴포넌트 Context API ExampleCountPrivder를 만들어서 .. React & TypeScript/React 2025. 1. 10.

• 

  MUI-Stack, Box, sx(스타일링) 적용에 대한 고찰 display : flex 먹힌 Box 라고 보면 된다. Stack 이나 Box나 다 div 로 치환된다. sx 로 style을 먹이면, css는 css module 형태로 적용되어 css 중첩을 방지시킨다. MUI 꽤 좋아진 거 같다. React & TypeScript/React 2024. 2. 22.

• 

  [ESLint] naming-convention 설정방법 작성한 코드 rules: { // eslint-disable-next-line @typescript-eslint/naming-convention "@typescript-eslint/naming-convention": [ "warn", { selector: "typeAlias", // 타입선언 format: ["PascalCase"], }, { selector: "memberLike", // Property 멤버 format: ["camelCase"], }, { selector: "function", // exported function (컴포넌트 명) format: ["PascalCase"], modifiers: ["exported"], }, { selector: "function", // functio.. React & TypeScript/TypeScript 2023. 11. 23.

• 

  [React] useId 이거 언제쓰지...싶을 때. (사용 예시) React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다. 딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다. 오늘 사용 했었는데, input과 label을 연결해줄 때 사용했다. component 중 일부의 코드다. 아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다. 생각보다 유용했다. const connectionId = useId(); const [isChecked, setIsChecked] = useState(checked); return ( {...} ); 참고 useId – React The library for web and native.. React & TypeScript/React 2023. 11. 15.

• 

  [TypeScript] GENERIC Basic (그래서, T야?) 배경 생각해보면, 예전에 교수님 수업시간에 C언어 설명하실 때도, GENERIC으로 표현된 C언어 함수를 보여주셨던 것 같다. 그 때는, 거의 코딩을 모르는 상태라서 아예 못알아봤던 것 같고 늘 모르고 살던 것을 알았을 때의 "개안" 상태가 된 것 같다. 늘.. T가 뭐지? 하면서 라이브러리나 github 소스코드를 보곤 했었으니까.. 문제 function checkNotNull(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } const result = checkNotNull(23); console.log(result); checkNotNull(null); 위와 같이 작.. React & TypeScript/TypeScript 2023. 8. 22.

• 비공개 - [TypeScript] 활용법 Basic (이 건 뭐고, 저 건 또 뭐야? 싶을 때 보는) 보호되어 있는 글 입니다. 2023. 7. 10.

• 

  [Next.js] Next.js 13 활용법 Basic 동적 라우팅 생각보다 간단하다. slug 라는 형태로 sub page를 만들어 준다. 예전 회사에서 왜 CRA를 썼던 건지 의문이다. 생각해보면, 에전에 만났던 개발자분들도 막연히 낯서니까 프론트페이지 구축을 CRA에서 멈췄던 것 같다. 그러나, 결국 Next를 익히는 허들이 CRA와 그닥 차이가 없다. ...오늘은 시간이 없어서 나중에 계속쓰자..ㅠ React & TypeScript/React 2023. 6. 2.

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React / Recoil] 예제로 알아보는 Recoil (컨셉, 환경세팅, Atom, Selector) This Document wrote based Recoil v0.7.6 at 2022.12.30. 1. Concept 전역 상태 관리를 하는 상태 관리 라이브러리이다. key, value를 한 쌍으로 이루어서 사용한다. React를 만든 메타에서 직접 만든 Library이기 때문에, React답게 유지하려고 만들었다고 한다. 나는 redux(현재까지 좀 더 많이 사용 중인)를 안써봤기 때문에 잘 모르지만, 비교 사용해본 사람들은 redux보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. React & TypeScript/Recoil 2023. 1. 9.

• 

  [TypeScript] as 사용에 대한 이해 (feat. Type Assertions) 찾게된 이유 & 해결 ... // 에러 상황 data: data?.map(price => Number(price.close)), ... // 발생된 에러 TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error. Type '{ name: string; data: number[] | undefined; }' is not assignable to type 'number'. Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error. Type .. React & TypeScript/TypeScript 2022. 12. 27.

• 

  [React / TypeScript] props를 구조분해할당으로 전달받을 때 Type Error (TS2322) 문제상황 TS2322: Type '{ data: ReservationDataType[]; }' is not assignable to type 'IntrinsicAttributes & ReservationDataType[]'. Property 'data' does not exist on type 'IntrinsicAttributes & ReservationDataType[]'. // 부모 컴포넌트 import React from "react"; import RenderComponent from "./RenderComponent"; import type { ReservationDataType } from "interface/interface"; const ReservationList = () => { // .. React & TypeScript/TypeScript 2022. 12. 20.

• 

  [React / Ant Design] Ant Design에서 Calendar Localization 하는 법 Antd ConfigProvider 적용 import React from "react"; import AppLayout from "./components/AppLayout/AppLayout"; import { ConfigProvider } from "antd"; import "dayjs/locale/ko"; // 1번 import koKR from "antd/locale/ko_KR"; // 2번 const App = () => { return ( ); }; export default App; 1번 라인 : Jan~Dec -> 1월 ~ 12월로 표현 바뀜 (세부목록은 json 참고) 2번 라인 : 전체 placeHolder 가 적용되는 것 참고 https://cdn.jsdelivr.net/npm/dayjs.. React & TypeScript/React 2022. 12. 19.