Portfolio

컴포넌트 작성 방식, 네이밍 규칙, 프로젝트 폴더와 파일 구조 등 필요한것들을 정하여 일관성 있게 개발합시다!

[중요] 줄임말은 쓰지 않는다. 줄임말은 어떠한 경우에도 사용하지 않습니다. res e(이벤트 객체) i 등 과 같은 모든 줄임말은 금지합니다.

1. 함수 export 방식 선언 후 export 👈VS 선언과 동시에 export

함수 선언 방식은 const 를 사용합니다.


const Component = (props: Props) => {}

export default Component;

tsx를 반환한다면 확장자 이름을 .tsx를 사용합니다.

3. ASI를 이용하지 않고 세미콜론을 필수적으로 써줍니다. (prettier로 관리).


// Uncaught TypeError: 1 is not a function
let a = 1
(function() {
  console.log("Hello!");
})();

4. 리터럴 값은 상수로 만들어서 사용합니다. 상수는 스네이크 케이스를 사용합니다.


const BASE_URL = 'http://localhost3000';

모든 함수는 화살표 함수로 작성합니다.

var를 쓰지 않고, const와 let을 사용합니다.(단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)

image, svg는 케밥 케이스 사용하여 네이밍합니다.(ex. erase-check.svg).

변수명은 camelCase로 작성합니다. (issueLabel).

.tsx 파일의 파일(폴더)명은 PascalCase를 사용합니다. ex) LoginPage.tsx.

절대 경로로 import, export 사용합니다. src: @, test: #

export할때 barrel export 방식을 사용하지 않습니다.

타입을 분리할 경우(여러 곳에서 타입이 생성될 경우(2군데 이상)) types 디렉토리에 관리한다.

최대한 코드에 대한 설명 주석은 적지 않습니다. 이름만 읽어도 무슨 일을 하는 함수인지 알 수 있어야합니다.

만약 주석이 필요한 경우 // TODO: 해야 할 일 혹은 한 일을 날짜와 함께 적어줍니다.(2022.09.01). 신경써서 사용하기


// TODO: [2024.02.01] 해야 할 일

변수명이나 함수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해줍니다. 단, 의미없거나 불필요한 접두사나 접미사가 붙는 것은 지양합니다.(ex) currentTodoListData (X) ⇒ todoList (O))


변수명은 명사를 사용(단, 플래그들의 is, has는 예외)
함수명은 동사 + 명사

16. 이벤트 핸들러를 정의할때 handle + 메서드명로 정의합니다.

on 접두사는 하위 컴포넌트에 Props 로 전달할때 사용합니다.

handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미합니다.(handle + 이벤트 + 버튼)


function DateTypeToggleButton ({ onClick }) {
	return <button onClick={onClick} />
}

function ModalButton ({ onClick }) {
	return <button onClick={onClick} />
}

function Calendar () {
	const handleClickDateType = () => {}
  const handleModalOpen = () => {}

	/* 
		주의!!
		컴포넌트의 props로 핸들러를 넘길때는 on 접두사를 사용해야 합니다.
	*/
	return (
		<>
			<DateTypeToggleButton onClick={handleClickDateType} />
			<ModalButton onClick={handleModalOpen} />
		</>
	)
}

화살표 함수 작성시 한 개의 파라미터만 사용하더라도 중괄호 사용(prettier로 관리)

선언부, 구현부 사이에는 줄 간격 해줍니다. 이외에 의미가 서로 다른 부분이라면 줄 간격 필수.

18. 인라인 함수는 사용하지 않습니다. 함수를 생성하여 할당해주세요.


function MyComponent() {
	return (
		// ❌
		<button onClick={() => setClose(true)}>버튼</button>
	);
}

후위 연산자 사용하지 않습니다. ++ --

21. react 의 for문 고유 키를 유니크하게 만들어줄 값이 없다면 다음과 같은 방법으로 결정합니다.


todoList.forEach((todo, index) => {
	return (
		<li key={${index}-${todo.value}}>
			value
		<li>
	)
});

import할때 형제 파일의 경우는 절대 경로 사용하지 않고, 상대 경로 사용합니다. ./component.tsx

컴포넌트의 Props type의 이름은 항상 Props 로 생성한다. tsx를 반환하지 않는 ts 파일의 경우에는 Parameters 이름으로 생성한다.

컴포넌트와 커스텀 훅만 export default

children 타입은 ReactNode

interface 를 주로 사용하고, interface를 사용할 수 없을때는 type 사용

h1, h2,…헤딩 태그들을 스타일용으로 사용하지말자. 접근성 위배

<> </> 대신 <Fragment></Fragment> 사용하기

개발 컨벤션