나는 회사에서 어떤 방식으로 코드를 만들지 모르기 때문에!
나에게는 좋은 [한 파일 내에서 여러 컴포넌트를 선언해도 좋은 경우] 방식으로 생각해서 기억하려고 한다.
나는 모달을 만든다면 아마도 이렇게 만들꺼 같다.
타이틀 부분과, 하단 버튼이나 추가 사항부분, 가운데 바디의 중요내용들 해서..
// ModalHead.js
export function ModalHead () {
return <header>모달머리</header>
}
// ModalBody.js
export function ModalBody () {
return <section>모달몸</section>
}
// ModalFoot.js
export function ModalFoot () {
return <div>모달발</div>
}
이렇게 만들면 파일을 3개를 가져야 한다,
또한, 파일 구조를 파악하기에 여러 파일을 열어서 확인하는건 비효율적 일수 있을꺼 같다.
[한 파일 내에서 여러 컴포넌트를 선언해도 좋은 경우]
한 컴포넌트 내에서만 사용할 경우
하나의 묶음 처리를 하면 좋을 경우에 사용하면 좋을 꺼 같아서 가지고 왔다!
// Modal.js
export function Modal () {
Modal.Head = function () {
return <header>head</header>
}
Modal.Body = function () {
return <header>body</header>
}
Modal.Foot = function () {
return <header>foot</header>
}
}
// ModalWrap.js
export function ModalWrap () {
return (
<div>
<Modal.Head/>
<Modal.Body/>
<Modal.Foot/>
</div>
)
}
[참고]
https://www.youtube.com/watch?v=gTpxMgIqh-k&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=8
'[TIL]내 머릿속의 코드' 카테고리의 다른 글
[TIL:240318][Math.trunc(),parseInt(),+ 등 ] 소수점을 정수로 floor,celil,round 말고! (0) | 2024.03.18 |
---|---|
[TIL:240317] 짝수, 홀수 더 짧은 코드로 확인하기(+공배수 인지 확인하기) (0) | 2024.03.17 |
[TIL:240312][코.테] map으로 문자 형변환 해서 더하기 (0) | 2024.03.13 |
[TIL:240312] 코.테를 시작했다. (0) | 2024.03.12 |
[TIL:240305] JS 배열 메소드 모습은 동작이 달라 (2) | 2024.03.06 |