인프런 커뮤니티 질문&답변
작성한 질문수
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
23.08.05 09:56 작성
·
453
1
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
괄호를 따로 안써도 되는것 같은데,
어떤 의미인지가 궁금합니다.
답변 2
1
2023. 08. 05. 12:58
export import 하실때 중괄호 {} 로 묶어서 내보내고 들여오는 걸 말씀하시는 거라면,
import React from 'react';
import { Link } from 'react-router-dom';
function LinkButton({ children, link , className }) {
return (
<Link to={link}>
<div className={className}>{children}</div>
</Link>
);
};
function NormalButton({ children, className }) {
return (
<div className={className}>{children}</div>
);
};
export default { LinkButton, NormalButton };위와 같은 코드처럼 한 파일 안에서 여러가지 함수나 클래스형 컴포넌트를 내보내기 위해 사용합니다.
그게 아니라 컴포넌트의 매개변수가 { children, link , className } 등으로 받아오는 게 궁금하시다면
자바스크립트의 구조분해할당을 이해하고 리액트의 props 구조분해할당을 검색해보세요.
0
2023. 08. 06. 01:02
아, 질문을 자세히 안드렸네요, 소괄호 입니다.
아래 소스 코드에서 ( ) 로 묶어서 return 하는데,
리턴하는 내용이 multiple 라인이라서 ( ) 를 쓰는 것인지
아니면 한 줄만 리턴 할려면 굳이 ( ) 를 안 써도 되는지..
아니면 반드시 ( ) 로 묶어줘야하는것인지..
궁금하네요
function Comp1() {
return (
);
}
2023. 08. 06. 18:42
아래와 같이 리턴하려는 내용이 한 줄이라면 굳이 괄호를 사용하지 않아도 됩니다.
function MyComponent() {
return <OtherComponent />;
}그리고 여러 줄이라도 괄호를 사용하지 않고 리턴해도 정상적으로 작동하긴 합니다.
다만 그렇게 하면 코드의 들여쓰기도 다 틀어져 보이고 가독성이 떨어지기 때문에,
대부분의 경우에 괄호로 묶어 주는 것이 좋습니다.
또한 prettier 같은 코드 포맷팅 도구에서는 기본적으로 여러줄에 걸친 리턴 코드는 괄호로 묶어주도록 설정되어 있습니다.
2023. 08. 06. 18:32
상세한 답변 감사드립니다 😀