React

• 컴포넌트 선언은 function keyword를 이용하자
• 컴포넌트 내부 함수 선언은 화살표 함수로 선언하자

function App() {
	const foo = () => {
		console.log('hi');
	}	

	return <div>Hello</div>
}

• export default 유동적으로 (컴포넌트, 커스텀훅)

TypeScript

• 컴포넌트 Props 타입

  • 사용하는 컴포넌트 선언된 곳 위쪽에 위치
  • 컴포넌트의 props 타입은 컴포넌트이름 + Props 로 짓는다. ex) type ItemProps = { }

• 네트워크 요청으로 주고받는 데이터 타입은 api 폴더에 types.ts에 선언해두기

• props 이외 타입들은 이름 + Type 으로 짓는다. ex) type ItemType = { }

  • 여러 곳에서 사용되는 타입의 위치는 src/types.ts 파일 안에 위치시킨다.
  • interface는 웬만하면 type으로 쓰고 필요한 부분에서만 사용한다.

• 언제나 유동적으로! 너무 스트레스 받지 않도록 하자.

Styled-Components

width/height → position 관련 속성 → display, flex 관련 속성 → margin/padding → border 관련 속성 → font 관련 → color 관련 → 나머지

(* 예시에는 빈줄이 있지만 실제로는 안 넣는다.)

const Div = styled.div`
	width: 500px;
	height: 500px;

	position: absolute;
	top: 10px;
	left: 10px;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	margin: 0 auto;
	padding: 0;

	border: 1px solid black;

	font-size: 30px;

	background-color: white;
	color: ${({ theme }) => theme.color.neutral.textStrong};

	cursor: pointer;
`;

Import문 순서

• **eslint-plugin-import 사용해서 자동으로 정렬하기**
• 참고자료