Props
리액트 앱을 만들다 보면 컴포넌트가 다른 컴포넌트에 값을 전달해야 하는 상황이 생긴다. 컴포넌트 간에 값을 어떻게 주고 받을까?
- 하나의 값 전달
- 여러 개의 값 전달
- 구조 분해 할당으로 여러 개의 값 사용
- 스프레드 연산자로 여러 개의 값 전달
- 기본값 설정
- props로 컴포넌트 전달하기
📒 props란?
리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있다. 이 객체를 리액트에서는 Props라고 한다, properties의 줄임말로 속성이라는 뜻이다.
컴포넌트는 어떤 상황에서 자식에게 값을 전달할까?
리액트는 보통 재사용하려는 요소를 컴포넌트로 만든다. 예를 들어 내용은 각각 다르지만, 모두 동일한 구조이다. 리액트에서는 내용은 다르지만 구조가 같은 요소를 주로 컴포넌트로 만든다. 여러 게시물 리스트를 페이지에 표시할 때는 이 컴포넌트를 반복해 렌더링하고, 게시물 각각의 내용은 Props로 전달한다. 리액트에서는 컴포넌트의 공통 기능이 아닌 세부 기능을 표현할 때 Props를 사용한다. 보통 리액트에서 컴포넌트에 값을 전달하는 경우는 세부 사항들, 즉 컴포넌트의 속성을 지정하는 경우가 대부분이다.
리액트의 컴포넌트와 Props를 샌드위치 제조에 비유한다면 샌드위치의 겉을 둘러싸고 있는 빵은 컴포넌트이고 샌드위치의 속은 Props와 같다. 다 똑같은 샌드위치지만 Props로 햄을 전달하면 햄 샌드위치가 되고, 야채를 넣으면 야채 샌드위치가 되는 원리와 흡사하다.
🌏 Props로 값 전달하기
📌 [하나의 값 전달]
// App.js
function App() {
const name = "이지은";
return (
<div className="App">
<Header />
<Body name={name} />
<Footer />
</div>
);
}
export default App;// Body.js
function Body (props) {
return <div className="Body">{props.name}</div>;
}
export default Body;
- Props를 전달하려는 자식 컴포넌트 태그에서 이름={값} 형식으로 작성하면 된다.
- 값을 사용할 때는 점 표기법을 사용해야 한다.
📌 [여러 개의 값 전달]
// App.js
function App() {
const name = "이지은";
return (
<div className="App">
<Header />
<Body name={name} location={"서울시"} /> 📌
<Footer />
</div>
);
}
export default App;// Body.js
function Body (props) {
return (
<div className="Body">
{props.name}은 {props.location}에 거주합니다.
</div>;
)
}
export default Body;
- 변수를 미리 선언하지 않아도 객체 props에 프로퍼티를 추가해 전달할 수 있다.
📌 [구조 분해 할당으로 여러 개의 값 사용]
- props로 전달 받아 변수로 저장하는 구조 분해 할당
function Body(props) {
const { name, location } = props;
...
}
- 매개변수에서 구조 분해 할당
function Body({name, location}) { 📌
return (
<div className="body">
{name}은 {location}에 거주한다.
</div>
);
}
export default Body;
- Props로 전달된 값이 많으면, 이 값을 사용할 때마다 객체의 점 표기범을 사용해야 하기 때문에 불편하다. Props는 객체이므로 구조 분해 할당하면 간편하게 사용할 수 있다. 매개변수에서 구조 분해 할당하면 더 간결한 코드를 작성할 수 있다.✨
- 구조 분해 할당으로 전달 받은 값은 점 표기법을 사용하지 않아도 된다.
📌 [스프레드 연산자로 여러 개의 값 쉽게 전달하기] + [기본값 설정하기]
// App.js
function App() {
const BodyProps = {
name: "이지은",
location: "서울시",
favorList: ["김치찌개", "떡볶이", "삼겹살"],
};
return (
<div>
<Header />
<Body {...BodyProps} /> 📌
<Footer />
</div>
);
}
export default App;// Body.js
function Body({ name, location, favorList}) { 📌
return (
<div className="body">
{name}은 {location}에 거주합니다.
<br />
{favorList.length}개의 음식을 좋아합니다.
</div>
);
}
Body.defaultProps = { 📌
favorList: [],
};
export default Body;
- 부모 컴포넌트에서 Props로 전달할 값이 많으면, 값을 일일이 명시해야 하므로 불편할 뿐만 아니라 가독성이 떨어진다. 이때 Props로 값을 하나의 객체로 만든 다음, 스프레드 연산자를 활용해 전달하면 훨씬 간결하게 코드를 작성할 수 있다. 스프레드 연산자를 이용해 객체의 프로퍼티를 각각 Props 값으로 전달한다.
- 실무에서는 백엔드 서버가 제공하는 데이터를 Props로 주고받는 경우가 많다. 이때 예상치 못한 서버 오류로 인해 정상적인 값을 받지 못하면 오류가 발생한다. defaultProps로 Props의 기본값을 설정하면 효율적으로 이런 오류를 방지할 수 있다.
📌 [Props로 컴포넌트 전달하기]
Props로 자바스크립트 값뿐만 아니라 컴포넌트도 전달할 수 있다.
// App.js
function Children() { 📌
return <div>Children component</div>
}
function App() {
return (
<div className="App">
<Header />
<Body>
<Children /> 📌
</Body>
<Footer />
</div>
);
}
- Body 컴포넌트 자식 요소로 Children을 배치했다. 리액트에서는 자식 컴포넌트에 또 다른 컴포넌트를 배치하면, 배치된 컴포넌트는 자동으로 Props의 Children 프로퍼티에 저장되어 전달된다.
// Body.js
function Body({ children }) {
return <div className="Body">{children}</div>; 📌
}
export default Body;
- Props의 children 프로퍼티로 전달되는 자식 컴포넌트는 값으로 취급하므로 JSX의 자바스크립트 표현식으로 사용할 수 있다.
📕참고 : 한 입으로 잘라 먹는 리액트 - 이정환
'기술 > React' 카테고리의 다른 글
| [React] useRef - 리액트에서 DOM 조작하기 (0) | 2024.02.27 |
|---|---|
| [React] useState - 컴포넌트와 상태 (0) | 2024.02.27 |
| [React] JSX (0) | 2024.02.27 |
| [React]재렌더링이 발생하는 조건 (0) | 2024.02.27 |
| [React] 조건부 렌더링 (0) | 2024.02.26 |