20221013

본 프로젝트에 투입되고, 3개의 project 파일을 오가면서 구조를 살피기로 했다.

코드를 읽으면서 모르는 개념이 나오면 이곳에 정리해 둘 예정.

편의상 파일명을 줄여서 호칭하겠다.

 

• ModelEquipmentContainer.tsx => MEC
• ModelEquipmentModule.ts => MEM
• ModelEquipmentApi.ts => MEA

MEC => MEM => MEA? 의 흐름이라고 들었던 것 같긴 한데 아직 잘 모르겠다

 

JSX.Element(MEC.76)

값-기반 요소 (value-based elements)

사용자가 만든 사용자 정의 컴포넌트로 스코프 내의 식별자에 의해 사용됨

 

타스에서는 함수형 컴포넌트로 표현을 해석을 기본으로 하고, 함수형 컴포넌트가 확인되지 않으면 클래스 컴포넌트로 해석함. 기본적으로 JSX의 결과 타입은 any이지만, JSX.element 인터페이스를 통해 해당 타입으로 변경 가능

 

클래스형 컴포넌트에서 render메소드를 통해 ReactNode를 리턴하는 반면, 

함수형 컴포넌트는 ReactElement를 리턴.

 

ReactElement는 React.createElement로 컴파일 되며, JSX.Element는 any타입의 props와 type을 가진 React.createElement이다.

• TS class component: returns ReactNode with render(), more permissive than React/JS
• TS function component: returns JSX.Element | null, more restrictive than React/JS

역사적인 이유와 하위호환성 문제로 두 컴포넌트의 리턴 타입이 다름.
따라서 함수형 컴포넌트를 사용한다면 리턴값의 기본 타입으로 JSX.element를 사용해주어야함.

 

https://velog.io/@deli-ght/React.FC-vs-JSX.Element

React.FC vs JSX.Element

 

formik(MEC.185)

formik = form 관련 라이브러리

React로 웹을 만들다보면 우리는 사용자에게 다양한 인풋을 받게 됩니다. 이때 모든 인풋을 각각의 state로 관리하면 코드가 쉽게 복잡해집니다. 그래서 form관련 라이브러리를 사용하기도 합니다. 오늘은 form관리 라이브러리중 하나인 Formik의 사용법을 알아보려고 합니다.

 

https://leedr0730.medium.com/react-formik-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-b376347bb23d

[React]Formik 사용법 알아보기

 

useRef(MEC.187)

React에서 DOM을 선택해야 할 때 사용합니다.(JS의 getElementById, querySelector)

useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 합니다.

그러면 Ref 객체의 .current 값은 우리가 원하는 DOM을 가르키게 됩니다.

 

https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook

 

 

React Recoil SelectorFamily(MEM.47)

selectorFamily = 읽기 전용 RecoilValueReadOnly 또는 수정 가능한 RecoilState selector를 반환하는 함수를 반환합니다.

selectorFamily는 selector와 유사한 강력한 패턴입니다. 다만 get, set, selector의 콜백을 매개변수로 전달할 수 있다는 점이 다릅니다.

 

https://recoiljs.org/ko/docs/api-reference/utils/selectorFamily/

selectorFamily(options) | Recoil

 

https://codingsalon.tistory.com/114

[React] selectorFamily, useRecoilValueLoadable