인프런 커뮤니티 질문&답변

작성한 질문수

처음 만난 리액트(React)

Component 합성과 추출

Component 만들때 괄호로 묶는 어떤 의미가 있을까요?

작성

·

467

1

Component 만들때 괄호로 묶는 어떤 의미가 있을까요?

괄호를 따로 안써도 되는것 같은데,

어떤 의미인지가 궁금합니다.

HTML/CSS javascript react

답변 2

1

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 구조분해할당을 검색해보세요.

Inje Lee (소플)

지식공유자

상세한 답변 감사드립니다 😀

0

Inje Lee (소플)

지식공유자

안녕하세요, 소플입니다.

어떤 괄호를 말씀하시는 건지 예시 코드를 보여주실 수 있을까요?

감사합니다.

질문자

아, 질문을 자세히 안드렸네요, 소괄호 입니다.

아래 소스 코드에서 ( ) 로 묶어서 return 하는데,

리턴하는 내용이 multiple 라인이라서 ( ) 를 쓰는 것인지

아니면 한 줄만 리턴 할려면 굳이 ( ) 를 안 써도 되는지..

아니면 반드시 ( ) 로 묶어줘야하는것인지..

궁금하네요

function Comp1() {
  return (
  );
}

Inje Lee (소플)

지식공유자

아래와 같이 리턴하려는 내용이 한 줄이라면 굳이 괄호를 사용하지 않아도 됩니다.

function MyComponent() {
    return <OtherComponent />;
}

그리고 여러 줄이라도 괄호를 사용하지 않고 리턴해도 정상적으로 작동하긴 합니다.

다만 그렇게 하면 코드의 들여쓰기도 다 틀어져 보이고 가독성이 떨어지기 때문에,

대부분의 경우에 괄호로 묶어 주는 것이 좋습니다.

또한 prettier 같은 코드 포맷팅 도구에서는 기본적으로 여러줄에 걸친 리턴 코드는 괄호로 묶어주도록 설정되어 있습니다.

작성한 질문수