React – JSX와 렌더링 – 컴포넌트 렌더링 – 2 – props 전달 및 기본값 설정

작성자 wooah
React – JSX와 렌더링 – 컴포넌트 렌더링 – 2 – props 전달 및 기본값 설정

React – JSX와 렌더링 – 컴포넌트 렌더링 – 2 – props 전달 및 기본값 설정

안녕하세요 여러분! 😊
이번 시간에는 컴포넌트 간 데이터를 주고받는 가장 중요한 통로인 **props(프롭스)**에 대해 자세히 알아볼 거예요.
props는 마치 부모가 자식에게 필요한 물건을 건네주는 것처럼,
상위 컴포넌트가 하위 컴포넌트에게 데이터와 설정값을 전달하는 방식이에요.

또한, props가 전달되지 않았을 때를 대비한 기본값 설정 방법도 함께 배워볼 거예요!

1. props란 무엇인가요?

props는 “properties(속성)”의 줄임말로, 컴포넌트에 전달되는 데이터입니다.

React 컴포넌트는 함수처럼 생겼지만, 마치 태그처럼 사용할 수 있는 특성이 있어요.

<Greeting name="민수" />

이렇게 사용할 때 name="민수"는 Greeting 컴포넌트에 props로 전달돼요.

2. 기본 props 사용법

✅ 부모 컴포넌트에서 props 전달

function App() {
  return <Greeting name="지수" />;
}

✅ 자식 컴포넌트에서 props 받기

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

➡️ 결과: “안녕하세요, 지수님!”

3. 구조 분해 할당으로 props 더 깔끔하게!

React에서는 props를 구조 분해해서 받는 걸 더 많이 씁니다.

✅ 구조 분해 방식

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

💡 구조 분해 덕분에 코드가 훨씬 간결하고 읽기 쉬워져요!

4. props는 읽기 전용 (불변)

function Greeting({ name }) {
  name = '바꿀래요'; // ❌ 오류 발생 가능
  return <p>안녕하세요, {name}님</p>;
}

props는 부모가 내려준 **“읽기 전용 데이터”**이기 때문에
자식 컴포넌트에서 값을 직접 변경하면 안 돼요!

만약 값을 바꾸고 싶다면, 상위 컴포넌트에서 상태로 관리하고 콜백으로 처리해야 해요.

5. 여러 props 전달하기

function Profile({ name, age, job }) {
  return (
    <div>
      <h2>{name}님</h2>
      <p>나이: {age}세</p>
      <p>직업: {job}</p>
    </div>
  );
}
<Profile name="지영" age={29} job="프론트엔드 개발자" />

➡️ 다양한 props를 전달해서, 하나의 컴포넌트를 다양한 데이터로 재활용할 수 있어요.

6. props에 기본값 설정하기 (defaultProps)

✅ 방법 1: defaultProps 속성 사용 (클래식 방식)

function Welcome({ name }) {
  return <h1>반갑습니다, {name}님!</h1>;
}

Welcome.defaultProps = {
  name: '방문자',
};
<Welcome /> // name이 없으면 "방문자"로 표시됨

✅ 방법 2: 매개변수에서 기본값 설정 (최신 추천 방식)

function Welcome({ name = '방문자' }) {
  return <h1>반갑습니다, {name}님!</h1>;
}

➡️ 매개변수 기본값 설정 방식이 더 깔끔하고 직관적이라 최근엔 이걸 더 많이 씁니다!

7. props로 함수 전달하기 (이벤트 처리용)

React에서는 컴포넌트 간에 함수도 props로 전달할 수 있어요.

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

function App() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return <Button text="클릭!" onClick={handleClick} />;
}

➡️ 부모에서 함수 정의 → 자식에게 전달 → 자식에서 실행
이게 바로 이벤트 버블링 대신 함수 전달 방식이에요!

8. props는 동적으로도 전달 가능!

const user = {
  name: '철수',
  age: 34,
};

<Profile {...user} />
  • 스프레드 문법을 쓰면 여러 값을 한 번에 props로 전달할 수 있어요.
  • 단, 컴포넌트 정의 시 구조를 정확히 맞춰야 해요!

9. props는 어떤 타입도 가능

타입 예시
문자열 <Text value="안녕" />
숫자 <Counter count={3} />
boolean <Toggle isOn={true} />
배열 <List items={['a', 'b', 'c']} />
객체 <User info={{name: '홍길동'}} />
함수 <Button onClick={fn} />
컴포넌트 <Card content={<Profile />} />

10. props 전달 시 주의할 점 정리

항목 주의사항
props는 읽기 전용 직접 수정하면 안 됩니다 (state 사용 필요)
반드시 필요한 props는 명시 undefined 방지 위해 기본값 설정 필수
props로 함수 전달 가능 이벤트 핸들링 시 자주 사용됨
구조 분해 사용 권장 가독성과 유지보수 향상
스프레드 사용 시 변수명 일치해야 함 {...user} 전달 시, 내부 구조를 맞춰야 함

마무리하며

React에서 props는 컴포넌트 간 정보를 주고받는 유일한 통로입니다.
props를 잘 활용하면 컴포넌트를 더 유연하고 재사용 가능하게 만들 수 있어요.
또한 기본값 설정을 통해 예상치 못한 오류를 줄이고 안정적인 코드를 만들 수 있답니다!

다음 시간에는 props와 짝꿍처럼 자주 쓰이는 **state(상태)**를 배워볼게요.
props는 외부에서 주는 값, state는 내부에서 변하는 값이라는 점 꼭 기억하세요! 🚀💡

답글 남기기