Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
577
작성한 질문수 7
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
괄호를 따로 안써도 되는것 같은데,
어떤 의미인지가 궁금합니다.
답변 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 구조분해할당을 검색해보세요.
0
안녕하세요, 소플입니다.
어떤 괄호를 말씀하시는 건지 예시 코드를 보여주실 수 있을까요?
감사합니다.
0
아, 질문을 자세히 안드렸네요, 소괄호 입니다.
아래 소스 코드에서 ( ) 로 묶어서 return 하는데,
리턴하는 내용이 multiple 라인이라서 ( ) 를 쓰는 것인지
아니면 한 줄만 리턴 할려면 굳이 ( ) 를 안 써도 되는지..
아니면 반드시 ( ) 로 묶어줘야하는것인지..
궁금하네요
function Comp1() {
return (
);
}
1
아래와 같이 리턴하려는 내용이 한 줄이라면 굳이 괄호를 사용하지 않아도 됩니다.
function MyComponent() {
return <OtherComponent />;
}그리고 여러 줄이라도 괄호를 사용하지 않고 리턴해도 정상적으로 작동하긴 합니다.
다만 그렇게 하면 코드의 들여쓰기도 다 틀어져 보이고 가독성이 떨어지기 때문에,
대부분의 경우에 괄호로 묶어 주는 것이 좋습니다.
또한 prettier 같은 코드 포맷팅 도구에서는 기본적으로 여러줄에 걸친 리턴 코드는 괄호로 묶어주도록 설정되어 있습니다.
강의가 삭제되었다고 합니다
0
110
1
이거 왜 존재하지 않는다고 뜨는건가요
0
138
1
존재하지 않는 수업이라고 떠요
0
184
1
안드로이드 에뮬레이터 오류
0
101
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
130
1
prevIsConfiromed 질문
1
144
2
chapter14 잘이해가 되지않습니다..
1
136
2
2025년 3월 리액트버전
1
205
2
npm 설치 오류
1
178
1
chapter_07 콘솔로그 질문드려요~!
1
129
2
안녕하세요 미니블로그 실습 질문드립니다.
1
179
3
에러가 떠요
1
220
3
Chapter6 질문 드립니다
1
210
2
실습 코드 있을까요?
1
208
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
234
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
309
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
142
1
버튼이 안 뜹니다
0
305
2
npx create-react-app my-app
1
471
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
377
3
Chapter_05 터미널, 리액트 에러
0
194
2
npx create-react-app my-app 명령어 반응없음
1
433
3
import 코드 에러
1
215
1
백틱
1
122
1





