230703 프론트엔드 개발 컨벤션 회의 (17:40 ~ 18:40)

[cruelladevil]

회의 안건

프론트엔드 개발 컨벤션

💡 타입스크립트

type alias / interface

• 객체는 interface 로 타입 선언한다.
• interface의 기능이 필요하지 않다면 type alias 로 타입 선언한다.

🔗 참고 링크

• https://tecoble.techcourse.co.kr/post/2022-11-07-typeAlias-interface/
• https://medium.com/humanscape-tech/type-vs-interface-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-f36499b0de50
• https://techblog.woowahan.com/9804/

type-only import & export

type을 외부 모듈에서 import할 때 type 키워드를 붙인다.

import type { SomeThing } from "./some-module.js";

export type { SomeThing };

함수 반환 타입

• 추론되지 않는 타입의 경우 명시적으로 반환타입을 지정한다.
• 📌 (논의중) 함수 선언시 반환 타입을 상시 명시해 줄것인가?
  • pros: 리팩터링 시에 반환 타입이 변경되는 것을 방지할 수 있다.
  • cons: 매번 타입을 선언해야하기 때문에 불편함이 있다.

🔗 참고 링크

• https://www.notion.so/19-73a9a55b3edb4e0fb2546dc62626fb43

💡리액트

컴포넌트 props type

• 컴포넌트의 props는 interface를 사용한다.
• props 타입 명칭은 {컴포넌트명}props 로 짓는다.

컴포넌트 선언

• 화살표 함수를 사용하여 함수 선언문으로 컴포넌트를 선언한다.

커스텀 훅

• 커스텀 훅은 객체로 반환한다.

• 📌 (논의 중) 커스텀 훅이 상태와 상태 변경 setter함수만 반환한다면 배열로 반환해야 하는가?

  //useInput.ts 
  const useInput = () => {
  	const [input, setInputState] = useState('');
  	
  	const setInput = (input: string) => {
  		//some...
  		return setInputState(input);
  	}
  
  	//option1
  	return [input, setInput];
  
  	//option2
  	return {input, setInput};
  }
  
  //사용처
  //option1
  const [, setInput] = useInput();
  
  //option2
  const { setInput } = useInput();