Props 개념, 컴포넌트 재사용

1. Props 정리

정의

• Props = Properties의 줄임말
• 부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달하는 방법
• React의 핵심 특징인 단방향 데이터 흐름을 담당
• 읽기 전용(immutable) 데이터 → 자식 컴포넌트에서 수정 불가

특징

 

특징	설명
단방향 데이터 흐름	부모 → 자식으로만 전달
읽기 전용	전달받은 데이터는 변경 불가
다양한 데이터 전달	문자열, 숫자, 배열, 객체, 함수 등
데이터 확인	props를 콘솔로 확인 가능

 

기본 예시

function Header(props) {
  console.log('props', props.title);
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
}

function App() {
  return <Header title="React 시작" />;
}

 

컴포넌트 재사용 예시

function Button(props) {
  return <button>{props.text}</button>;
}

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

- 같은 컴포넌트를 props만 다르게 전달해 다양한 역할 수행

 

 

---

2. Props 배열 전달

개요

• props를 통해 배열(리스트) 데이터를 전달할 수 있음
• 전달받은 배열을 반복문 또는 **map()**으로 렌더링

예시

function Nav(props) {
  const lis = [];
  for(let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a href={'/read/' + t.id}>{t.title}</a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

function App() {
  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'js is...'}
  ];

  return <Nav topics={topics} />;
}

key 속성의 필요성

• 반복문에서 요소를 렌더링할 때 key 속성 필수
• key는 각 항목의 고유 식별자(id) 사용
• key 없으면 콘솔에 경고 발생

---

3. React.js Props

Props의 데이터 유형

• 문자열, 숫자, 불린
• 객체
• 배열
• 함수 (이벤트 핸들러 전달 시 유용)

예시: 함수 전달

function Child(props) {
  return <button onClick={props.onClick}>클릭</button>;
}

function App() {
  const handleClick = () => {
    alert('클릭됨');
  };

  return <Child onClick={handleClick} />;
}

Props의 불변성

• props는 수정할 수 없음
• 값을 변경하고 싶으면 부모 컴포넌트에서 새로운 값을 전달해야 함

---

요약

구분	설명
Props 정리	부모 → 자식으로 데이터 전달, 읽기 전용
Props 배열 전달	props로 배열 전달, 반복 렌더링, key 필수
React.js Props	props의 다양한 데이터 타입, 함수 전달 가능

 

참조

- 이고잉 [생활코딩! React 리액트 프로그래밍 ]