인프런 커뮤니티 질문&답변
작성한 질문수
컴포넌트에 매개변수 전달하는 방식에 대하여
해결된 질문
작성
·
98
·
수정됨
0
프로젝트 작성할 때 ,APP.js와 components폴더 안의 js모듈로 보통 구성을 하시는데,
왜 APP.js에서 $app을 매개변수로 받을 때는 소괄호에서 바로 받는데,
다른 컨포넌트 내부 js모듈에서는 중괄호로 받는건가요?
export default function App($app) {}
export default function CityList({ $app, initialState,handleLoadMore }) {}
APP의 경우 전달받는게 하나인데, CityList의 경우 APP에서 여러개의 매개변수를 받아오기 떄문에 구조분해로 받아오는 건가요?
만약 그렇다면 한개만 매개변수로 받아오는 경우, CityList도 (소괄호)안에 {중괄호}없이 바로 매개변수를 써도 되는 건가요?
답변 2
0
안녕하세요 🙂 질문주셔서 감사합니다.
App 컴포넌트는 단 1개의 매개변수를 전달받지만, CityList 컴포넌트는 여러개의 매개변수를 전달받습니다.
여러개의 매개변수를 전달받는 경우에는 자바스크립트의 '구조 분해 할당'을 사용해서
함수 내부에서 각각의 변수 이름을 사용해 직접 접근할 수 있어 코드가 간결해집니다.
'인프런 AI 인턴' 이 작성한 답변도 한 번 읽어보시면 도움이 될 것 같네요 🙂
감사합니다.
네 맞습니다 🙂
아래의 코드로 더 자세하게 설명드릴게요!
export default function CityList({ $app, initialState,handleLoadMore }) {}
export default function CityList(props) {
const { $app, initialState, handleLoadMore } = props;
}두 코드는 동일한 코드로, 위에 작성된 코드는 아래에 작성된 코드를 좀 더 간단하고 직관적으로 작성한 코드라고 보시면 될 것 같습니다!
0
안녕하세요, 인프런 AI 인턴입니다. ggang89님, 질문 주셔서 감사합니다.
자바스크립트에서 함수의 매개변수를 받을 때, 객체를 구조 분해 할당을 통해 받는 방식과 일반적으로 변수를 받는 방식에 대해 혼동스러우실 수 있습니다. 이를 명확하게 설명해드리겠습니다.
일반적인 매개변수 전달:
App($app)처럼 단일 변수를 받을 때는 일반적으로 매개변수를 소괄호 안에 바로 지정합니다.
- 이 방식은 함수가 인자를 여러 개 받을 때도 적용되며, 순서대로 각각의 변수를 직접적으로 받습니다.
구조 분해 할당:
CityList({ $app, initialState, handleLoadMore })처럼 객체의 여러 속성을 받을 때는 구조 분해 할당을 사용합니다.
- 이는 함수가 받는 단일 객체의 여러 속성을 각각의 변수로 한 번에 분해하여 받는 방법으로, 코드의 가독성을 높이고 각 속성을 바로 사용할 수 있도록 해줍니다.
따라서, CityList 함수가 단일 매개변수를 받더라도 객체로 전달된 여러 속성을 분해하고 싶다면 구조 분해 할당을 사용할 수 있습니다. 그러나 단일 매개변수만 받을 경우에는 {} 없이 직접 사용하는 것도 가능합니다. 즉:
export default function CityList($app) { ... }
와 같이 사용할 수 있습니다. 이는 매개변수로 전달되는 값이 객체가 아닌 단일 값일 때 적합합니다.
관련 질문 URL:
- 자바스크립트 구조 분해 할당 관련 질문 - 구조 분해 할당을 활용하는 방법에 대한 심화 설명을 제공합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
그렇다면 cityList 컴포넌트의 경우에도 1개의 매개변수만 받아오면 (소괄호)에 바로 매개변수를 넣어서 사용하면 되는 건가용?