태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다.
[React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달
JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지
developefeel.tistory.com
이번엔 전달받은 속성들을 다른 방식으로 전달하는 것을 알아본다.
분해 할당
props를 넘기는데 사용했던 컴포넌트에선 속성에 접근할 때 props.속성 식으로 전달했다.
분해 할당이란 props대신 어떤 속성을 받을지 명시해두고 좀 더 간단하게 전달받는 것이다.
BookCard 컴포넌트에 속성으로 세가지가 전달된다면 그걸 그대로 인자에 써서 사용하는 방식이라고 보면 된다.
각 속성값이 전달되어 내용으로 들어갔다.
'Front-end' 카테고리의 다른 글
| [React] 컴포넌트에 상태값 주고 변경하기 (0) | 2022.06.05 |
|---|---|
| [React] 컴포넌트에 조건문 주기, if, 3항 연산 (0) | 2022.06.05 |
| [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 (0) | 2022.06.04 |
| [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 (0) | 2022.06.04 |
| [React] 순수 html파일에서 react 사용하기 (0) | 2022.06.03 |