안녕하세요.
...
const SomeRoutes = ({ match: { url } }) => (
<Switch>
<Route path={`${url}/products/:productLayout`} exact component={SomeComponents} />
...
밑줄 친 부분 ({ match: { url } }에 사용된 문법이 정확히 어떻게 된건지 궁금합니다.
일단 비구조화 할당에 관한 거라는거는 알겠는데, 디테일을 제가 잘 이해하고 있는건지 모르겠습니다.
제가 대충 이해한 바를 말씀드리자면,
해당 컴포넌트의 기본 prop 값으로 match, location, history 객체가
{
match: { url: '/some_url', otherparams: '....' },
location: { otherparams: '....' },
history: { otherparams: '....' }
}
이런 식으로 들어오는데,
그중 match의 url를 콕 찝어서 사용하기 위해 { match : { url }} 로 비구조화 할당하는거지요?
Documentation 예제들 보면 위처럼 deep하게 비구조화하는 예제가 거의 없더라구요. 대부분 아래처럼 가장 높은 레벨의 속성만 할당하는 경우가 많은 것 같았어요.
const { match, location, history } = {
match: { url: '/some_url', otherparams: '....' },
location: { otherparams: '....' },
history: { otherparams: '....' }
}
그리고 비슷한 예제지만 우항의 key 값을 그대로 변수명으로 사용하고 싶지 않을때 아래처럼 이름을 지정해주잖아요?
const { match: new_name1 , location: new_name2, history: new_name3 } = {
match: { url: '/some_url', otherparams: '....' },
location: { otherparams: '....' },
history: { otherparams: '....' }
}
위의 { match: new_name1 }과, { match: {url}}은 아예 다른 의미인게 맞나요?
뭔가 질문 글 쓰다보니까 이해가 점점 되는 것 같은데 혹시 제가 잘못 이해한 부분이 있다면 꼭 댓글 부탁드립니다.
감사합니다 !!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
1. 생각하신게 맞습니다.
const a = {
match: {
url: 'aaa',
type: 0,
}
}
const matchFunction = ({match: {url, type}}) => {
console.log(url)
console.log(type)
}
matchFunction(a)
// aaa
// 0
2. 다른의미 맞습니다. 왼쪽걸 오른쪽 네이밍으로 사용합니다.