[React] 타입스크립트 옵셔널 체이닝, 옵셔널 , 함수형 업데이트, props 전달 등등 메모

복습겸 내가 보기 편하기 위한 기록..
큰건은 아니고 이번에 기존 돌아가고 있는 Next.js, Typescript 프로젝트에 기능 추가를 하였는데 그 과정에서 기록 해두고자 하는게 몇가지 있어서 짧게 포스팅 하려한다.

1. 옵셔널 체이닝 `?.`
undefined 오류 방지를 위해 쓰인다.
웬만한 undefined 오류에는 물음표가 직빵이다 ..
다른곳에서도 그렇고 ref 로 가져온 current 에 eventListener 에서도 오류 나던걸
옵셔널 체이닝으로 아래와 같이 해결하였다

childRef?.current?.removeEventListener('scroll', catchEventScroll);

타입스크립트가 이건 편한듯 ..

2. 논널 어썰쎤 오퍼레이터 (Non-null Assertion Operator) `!`
이건 뒤에 느낌표 붙여주는건데 논리 부정 연산자로 이 값은 무조건 null 이나 undefined 가 아니라고 못을 박아버리는건데
웬만하면 잘 안쓰일듯함

---

3. 타입 선언할때 useState 에 배열값을 선언할 경우 아래와 같이 할 수 있다.
이것도 옵셔널체이닝과 비스무리 하지만 옵셔널체이닝은 '?.' 이고 이건 그냥 ? 만 들어가는데 값이 있을수도 있고 없을수도 있다고 여지를 둬줌

#type.ts
export type dataType = {
    test1?: string[];
    test2?: string[];
    test3?: string[];    
};


#test.tsx
const [data, setData] = useState<dataType>(
	{ test1: []
    , test2: []
    , test3: []}
);

---

4. 무한 스크롤 기능을 구현해야되서 기존에 있는 데이터 뒤에 계속 fetch 한 resData 를 붙여줘야해서
아래처럼 진행을 하였는데

 

setData([...data, ...resData]);

 같이 일하시는분이 아래와 같이 함수형 업데이트를 사용하길 권장하셔서 좀 찾아보았다

setData(e =>[...e, ...resData]);

위에꺼는 그냥 초기 렌더링시의 상태를 참조하는거고, 연속적으로 여러번 호출되면 중간에 다른 컴포넌트나 외부에서 data 가 변경된경우 원하지않은 결과를 얻을 수 있다고함

아래 함수형 업데이트는 이전 상태에 의존하므로 중간에 상태가 변경되도 정확한 결과를 얻을수 있다고함
사실 결과값은 똑같은데 데이터 여러 컴포넌트 거칠거 아니면 위에껏도 상관 없어보이긴하는데, 그래도 함수형으로 하는것도 좋은 방법이니 이번에 또 배웠다 참고하자~!

 

---

5. 자식 컴포넌트에서 부모 props 받아올때
배열이고 string 이고 number 고 함수고 받아올 경우가 있는데 아래와 같이 조정하면된다
타입 선언 하는거 때문에 본 에러만 몇번인지 ㅎㅎ;;

type props = {
  numberArr: number[];
  number: number;  
  stringArr: string[];
  function1: (value: string) => void;  
};

export const childComponent: React.FC<props> = ({
  numberArr, number, stringArr, function1
}) => {

... 생략

만약에 ref 를 가지고 가고싶다면 아래와 같이 진행 가능

#부모 컴포넌트
const childRef = useRef<HTMLDivElement>(null);
<ChildComponent ref={childRef}/>

#자식 컴포넌트
type props = {
    test:number,
    test2:string
};

export const ChildComponent = forwardRef(({ test, test2 }: props, ref: ForwardedRef<HTMLDivElement>) => {
...생략

---

이번에 작업하며 느낀점은
부모에서 자식 컴포넌트로 가는 1 depth 정도의 경우엔 리덕스가 굳이 필요없겠단 생각이 들었던 반면에
이번엔 형제 컴포넌트 들끼리 값을 공유해야하고, 부모에서 자식, 자식에서 또 자식 이렇게 2depth 까지 가면서 , 리덕스의 필요성을 느꼈다 (props 타고타고 전달하는데 어찌나 현타가 오던지 .. )
다음번에 기능 추가할때는 Redux 를 심도있게 다뤄서 내걸로 만들어야겠다고 느낌

사실 일정이 촉박하고 퍼블리싱까지 도맡아 진행했어야 해서 정신없이 팍팍 넘어간 부분도 있어서 부끄러운 부분도 있는데 이렇게 조금씩 차근차근 정리해야겠다.