본문 바로가기
[TIL]내 머릿속의 코드

[TIL:240319][한 파일에 여러 return 경우] React Import, Export

by 졸린부엉이 2024. 3. 19.

나는 회사에서 어떤 방식으로 코드를 만들지 모르기 때문에!

나에게는 좋은 [한 파일 내에서 여러 컴포넌트를 선언해도 좋은 경우] 방식으로 생각해서 기억하려고 한다.

 

 

나는 모달을 만든다면 아마도 이렇게 만들꺼 같다.

타이틀 부분과, 하단 버튼이나 추가 사항부분, 가운데 바디의 중요내용들 해서..

 

// 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