[LIKELION] Styled components 과제 피드백

해당 글은 인하대학교 멋쟁이사자처럼 11기 FE를 위한 교육 자료로 작성되었습니다.

---

여러분, 저번 세션은 어떠셨나요?

저번주는 styled-components에 대해 학습했습니다. 이번주부터는 이제까지 학습했던 내용들을 활용해보는 세션을 진행하게 될 예정입니다. 그러니 꼭! 복습하시는 것을 추천드립니다.

간단한 피드백을 드리려고 합니다. 부담 없이 편하게 읽어주세요.

---

1. 올바른 파일 이름은 무엇일까?

이번 과제에서는 이미 존재하는 파일을 수정하는 것이 아닌, 새로 파일을 만들어 작성하는 경우가 있었죠? 그렇다면 이런 경우에 파일 이름과 폴더의 이름은 어떻게 짓는 것이 좋을까요?

[ 코딩 컨벤션 ]

코딩 컨벤션은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙입니다. 효율적이고 관리하기 쉬운 코드를 만들기 위해 효율적으로 규칙을 정할 필요가 있습니다.

이러한 코딩 컨벤션에는 이름을 짓는 것과 관련된 NAMING CONVENTIONS도 존재합니다. 이에 대해서 간단하게 알아보고 넘어가겠습니다.

우선 components의 이름은 Pascal case로 작성하는 것이 일반적입니다. 여기서 Pascal case는 첫 단어를 대문자로 시작하는 표기법입니다.

Header.js Footer.jsx MenuBar.js Dimmer.jsx

반대로 components가 아닌 Non-components의 이름은 Camel case로 적는 것이 일반적입니다. Camel case는 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식으로, Pascal에서 앞의 대문자만 소문자로 표기하는 것이라 생각하면 쉽습니다.

guestBook.js cookies.js

props의 이름을 지정할때도 마찬가지입니다. 일반적으로 props나 태그 내부의 속성명은 Camel case로 작성됩니다.

<div onClick="..." bgColor="..."> ... </div>

위처럼 파일 이름을 잘 구분해놓는다면, 파일명만 보더라도 해당 파일이 component와 관련된 것인지 쉽게 파악이 가능하겠죠?

---

2. 불필요한 빈 태그 제거

여러분이 새로운 components를 만들 때, 아래와 같은 형식으로 작성하게 됩니다.

const Components = () => {
	return (
	  <>
			<div>
				...
			</div>
		</>
	);
}

export default Components;

여기서 빈 태그인 <> </>는 꼭 적어줄 필요가 없습니다. 정확하게는 return 내부에 하나의 태그로 전체가 감싸져있다면 빈 태그를 적어줄 필요가 없게 됩니다. 따라서 아래처럼 작성하셔도 무방합니다.

const Components = () => {
	return (
		<div>
			...
		</div>
	);
}

export default Components;

다만, 아래와 같은 경우에는 빈 태그가 꼭 필요합니다.

const Components = () => {
	return (
		<>
			<div> ... </div>
			<div> ... </div>
		</>
	);
}

export default Components;

---

3. self-closing tag

태그 중에서도 여는 태그와 닫는 태그 사이에 내용이 들어가지 않는 태그들이 존재합니다. 해당 태그들은 self-closing으로 작성하면 간결하게 코드를 작성할 수 있습니다.

const Components = () => {
	return (
		<>
			<img src="..." alt="..."/>
			<img src="..." alt="..."></img>
		</>
	);
}

// 첫 img 태그가 두번째보다는 더욱 간결하죠?

export default Components;

---

이것으로 모든 피드백이 끝이 났습니다. 부족한 피드백임에도 읽어주셔서 감사드리며, 운영진 일동은 항상 아기사자 여러분의 성장을 응원합니다!