[React] 5. props(추가)

Props

Props란?

properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 읽기 전용 객체

• 부모 컴포넌트 : 자식 컴포넌트에게 전달할 데이터를 Props로 지정
• 자식 컴포넌트 : 부모로부터 전달받은 데이터를 Props 객체를 통해 사용함

Props는 컴포넌트의 재사용성을 극대화하는 핵심적인 문법

Props의 필요성

Props를 사용하지 않으면, 코드의 중복을 유발하고 유지보수가 어렵다.

Props를 사용한 예시

function UserProfile(props) { return <div>Hello! {props.name}</div>; }

function App() { return ( <div> {/* 형식으로 데이터 전달 */} </div> ); }

export default App;

Props 전달하고 받기

1. 부모 : Props 전달하기
   • key = {value} 형태로 Props를 전달함
     • key : Props의 이름(카멜 케이스 권장)
     • value : 전달할 데이터. 문자열은 따옴표로, 그 외 표현식은 중괄호로 감싸서 전달함.
2. 자식 : Props 받기
   • 자식 컴포넌트는 함수의 첫 번째 매개변수로 props 객체를 통째로 전달받음.

방법 A : Props 객체 직접 사용

• $props.속성명$ 형태로 데이터에 접근할 수 있음

// ChildComponent.jsx export default function ChildComponent(props) { console.log(props); // { name: “영희”, age: 25, user: { name: “철수”, age: 20 } }

return ( <div> <p>이름: {props.name}</p> <p>나이: {props.age}</p> <p>다른 사용자: {props.user.name}</p> </div> ); }

방법 B : 구조 분해 할당

• 매개변수 위치에서 객체 구조 분해 할당 문법을 사용하면 코드가 훨씬 간결해짐 필요한 props 키를 {}안에 직접 명시하여 변수처럼 바로 사용할 수 있음

// ChildComponent.jsx export default function ChildComponent({ name, age, user }) { return ( <div> <p>이름: {name}</p> <p>나이: {age}</p> <p>다른 사용자: {user.name}</p> </div> ); }

Props는 읽기 전용이다

자식 컴포넌트는 부모로부터 받은 Props를 절대로 직접 수정해서는 안됨.