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를 만들어서 .. 2025. 1. 10. MUI-Stack, Box, sx(스타일링) 적용에 대한 고찰 display : flex 먹힌 Box 라고 보면 된다. Stack 이나 Box나 다 div 로 치환된다. sx 로 style을 먹이면, css는 css module 형태로 적용되어 css 중첩을 방지시킨다. MUI 꽤 좋아진 거 같다. 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.. 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.. 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); 위와 같이 작.. 2023. 8. 22. 비공개 - [TypeScript] 활용법 Basic (이 건 뭐고, 저 건 또 뭐야? 싶을 때 보는) 보호되어 있는 글 입니다. 2023. 7. 10. 이전 1 2 3 4 ··· 7 다음
