실습 강의 미니프로젝트 const {} = props ;
449
작성한 질문수 1
function MainPage(props) {
const {} = props ;
props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?
답변 1
0
안녕하세요, 소플입니다.
해당 코드는 props가 객체로 전달이 되며, props 객체로부터 각 property들을 구조 분해 할당(Destructuring Assignment)을 사용해서 가져올 수 있다는 것을 보여주기 위해 작성한 것입니다.
입문자분들이 코드의 구조를 빠르게 익힐 수 있도록 하기 위해 넣어둔 코드라고 보면 됩니다.
지금 코드에서는 실제로 props에 아무 것도 없기 때문에 비워두었지만,
나중에는 아래와 같은 형태로 각 property를 변수로 가져올 수 있습니다.
function MyComponent(props) {
const { property1, property2 } = props;
return (
<div>
<p>{property1}</p>
<p>{property2}</p>
</div>
);
}
export default MyComponent;
function MyComponent({ property1, property2 }) {
return (
<div>
<p>{property1}</p>
<p>{property2}</p>
</div>
);
}
export default MyComponent;
JavaScript의 구조 분해 할당에 대한 더 자세한 설명은 아래 링크를 참고하시기 바랍니다!
감사합니다.
강의가 삭제되었다고 합니다
0
110
1
이거 왜 존재하지 않는다고 뜨는건가요
0
138
1
존재하지 않는 수업이라고 떠요
0
184
1
안드로이드 에뮬레이터 오류
0
101
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
129
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