React.js props - 리액트 프롭스

Props의 정의

---

Props는 "properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 
컴포넌트 간에 데이터를 주고받을 수 있게 해주는 React의 핵심 개념이라고 할 수 있습니다.

---

---

Props의 주요 특징

---

단방향 데이터 흐름: 데이터는 항상 부모에서 자식 컴포넌트로만 전달됩니다. 
읽기 전용(불변성): 자식 컴포넌트는 전달받은 props를 수정할 수 없고, 오직 읽기만 가능합니다. 
다양한 데이터 전달: 문자열, 숫자뿐만 아니라 함수, 객체, 배열 등 다양한 타입의 데이터를 전달할 수 있습니다.

---

---

간단한 사용 예시

// 부모 컴포넌트
function ParentComponent() {
  return (
    <ChildComponent name="홍길동" age={30} />
  );
}

// 자식 컴포넌트
function ChildComponent(props) {
  return (
    <div>
      <p>이름: {props.name}</p>
      <p>나이: {props.age}</p>
    </div>
  );
}

 

위 예시에서 ParentComponent는 name과 age라는 두 개의 props를 ChildComponent에 전달하고 있습니다. 

자식 컴포넌트는 props 객체를 통해 이 값들에 접근할 수 있습니다.

---

---

Props를 통한 컴포넌트 재사용

---

Props의 가장 큰 장점 중 하나는 컴포넌트의 재사용성을 높인다는 것입니다. 

동일한 컴포넌트를 여러 번 사용하면서 다른 데이터를 전달할 수 있습니다. 

function App() {
  return (
    <div>
      <Button text="로그인" color="blue" />
      <Button text="회원가입" color="green" />
      <Button text="취소" color="red" />
    </div>
  );
}

 

이처럼 Props를 활용하면 재사용 가능한 컴포넌트를 만들어 코드의 중복을 줄이고 유지보수성을 높일 수 있습니다.

React의 Props는 컴포넌트 간의 효율적인 데이터 전달을 가능하게 하여 더 모듈화되고 유지보수하기 쉬운 애플리케이션을 구축하는 데 도움을 줍니다.

---