Props (Property)
props는 자식 요소에 전달하는 정보입니다.HTML 요소에 class, id, src, alt 등의 속성을 전달했던 것처럼, 부모 컴포넌트가 가지고 있는 정보를 props를 통해 자식 컴포넌트에 전달할 수 있습니다.
props의 특징
- props는 React 내에서 속성(attribute)으로 사용됩니다.
- 읽기전용(Read-Only)입니다.
- 부모 컴포넌트가 자식 컴포넌트로 넘겨주는 주는 정보입니다.
- 부모 컴포넌트로부터 전달된 props는 자식 컴포넌트에서 직접 수정할 수 없습니다.
그럼, 한번 정의한 데이터는 바꿀 수 없는 건가요 ?
변경할 수 있습니다. 대신 부모 컴포넌트에서 데이터를 변경해야 합니다.
여기서 핵심적인 개념은 단방향 데이터 흐름입니다. 이는 React의 중요한 특징 중 하나로, 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 흘러가며, 이 방식은 애플리케이션의 상태 관리를 더욱 예측 가능하고 안정적으로 만들어 줍니다.
컴포넌트에 props 전달하기
아래 코드의 Profile 컴포넌트는 자식 컴포넌트인 Avatar에 어떠한 props도 전달하지 않았습니다.
export default function Profile() {
return (
<Avatar />
);
}다음 두 단계에 걸쳐 자식 컴포넌트인 Avatar 컴포넌트에 props를 전달해 보겠습니다.
1단계 : 자식 컴포넌트에 props 전달하기
Avatar 컴포넌트에 person(객체)와 developer(불린값)을 전달해 보겠습니다.
import Avatar from './Avatar';
function Profile() {
return <Avatar person={{ name: '김코딩', age: '20' }} developer={true} />;
}
export default Profile;이제, 자식 컴포넌트인 Avatar에서도 해당 props를 읽을 수 있습니다. 다음으로 받아온 props를 읽는 방법을 알아보겠습니다.
2단계: 자식 컴포넌트 내부에서 props 읽기
부모 컴포넌트에서 받아오는 props는 함수의 매개변수를 작성하는 () 소괄호 내부에 {} 중괄호를 작성하여 받아올 수 있습니다. person, developer 등을 쉼표로 구분할 수 있습니다.
function Avatar({ person, developer }) {
// person과 developer를 이 곳에서 사용할 수 있습니다.
}Avatar 컴포넌트에 props 값을 렌더링을 하기 위해 person과 developer 를 사용하는 로직을 추가하면 완성됩니다.
function Avatar({ person, developer }) {
return (
<>
<p> 안녕하세요 저의 이름은 {person.name}입니다. </p>
<p> 나이는 {person.age}살입니다. </p>
{developer && <p> 저는 현재 개발자로 일하고 있습니다. </p>}
</>
);
}
export default Avatar;React의 Props: 컴포넌트 간 정보 전달과 독립적인 관리
React에서 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 정보의 집합입니다. 이 정보를 이용해서 각 컴포넌트는 서로 영향을 주지 않고 독립적으로 작동할 수 있습니다.
예를 들어, Profile 컴포넌트가 있고, 그 안에 Avatar라는 자식 컴포넌트가 있다고 가정해 보겠습니다. Profile 컴포넌트는 Avatar에게 person이라는 데이터를 props로 전달합니다.
이때, Profile 컴포넌트는 Avatar가 이 person 데이터를 어떻게 사용하는지 신경 쓸 필요가 없습니다. Profile은 단지 데이터를 제공하며, Avatar 컴포넌트는 이 데이터를 받아서 필요한 처리를 하게 됩니다.
또한, Avatar 컴포넌트의 내부 구현을 변경하더라도, 이 변경이 Profile 컴포넌트에 영향을 미치지 않습니다. 예를 들어, Avatar에서 person 데이터를 활용하는 방식을 변경해도, Profile은 여전히 같은 데이터를 전달하기만 하면 됩니다.
자식 컴포넌트가 props로 받은 정보 중 일부만 필요할 때는 구조 분해 할당을 사용합니다.
구조 분해 할당
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
- 배열에 있는 속성을 해체하는 경우
var foo = ["one", "two", "three"];
var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"- 객체에 있는 속성을 해체하는 경우
var student = { name: '김코딩', age: 13 };
var { name, age } = student;
console.log(name); // '김코딩'
console.log(age); // 13 student.name이나 student.age와 같이 객체의 변수명을 언급하지 않아도 객체 내의값에 접근할 수 있습니다.
참고하기 좋은 사이트 : MDN : 구조분해할당
