React – 상태 관리와 Hooks – State와 Props – 1 – Props 전달과 구조 분해 할당

작성자 wooah
React – 상태 관리와 Hooks – State와 Props – 1 – Props 전달과 구조 분해 할당

React – 상태 관리와 Hooks – State와 Props – 1 – Props 전달과 구조 분해 할당

안녕하세요 여러분! 😊
이번 시간에는 React 컴포넌트의 핵심 소통 수단인 props에 대해 본격적으로 알아볼 거예요.
또한, 개발자라면 무조건 알아야 할 **구조 분해 할당(destructuring)**을 함께 익히면서
더 깔끔하고 유지보수하기 쉬운 코드를 작성하는 방법도 배워볼게요!

1. props란 무엇인가요?

props는 **properties(속성)**의 줄임말로,
부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이에요.

React에서 컴포넌트는 재사용 가능한 함수입니다.
그 함수에 전달하는 매개변수가 바로 props예요!

📦 비유하자면?

props는 택배 상자와 같아요!
부모 컴포넌트가 자식에게 데이터를 담아서 보내는 상자이고,
자식 컴포넌트는 그 상자를 열어 내용을 사용하는 거죠!

2. props 기본 사용법

✅ 부모 → 자식 전달

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

function App() {
  return <Welcome name="철수" />;
}
  • App은 Welcome 컴포넌트에 name이라는 props를 전달
  • Welcome은 props.name을 사용하여 출력

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

React 컴포넌트에서는 보통 props를 구조 분해 할당해서 쓰는 것이 일반적이에요.

✅ 일반 방식

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

✅ 구조 분해 방식

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

구조 분해 할당을 사용하면 props를 매번 객체처럼 다루지 않아도 되므로,
코드가 더 짧고 읽기 쉬워집니다! ✨

4. 여러 개의 props 전달하기

function Profile({ name, age, job }) {
  return (
    <div>
      <h2>{name}님의 프로필</h2>
      <p>나이: {age}</p>
      <p>직업: {job}</p>
    </div>
  );
}

function App() {
  return <Profile name="영희" age={30} job="디자이너" />;
}
  • props를 여러 개 전달할 땐, 구조 분해로 각 변수처럼 사용하면 매우 편리해요.

5. props의 기본값 설정하기

props가 전달되지 않아도 컴포넌트가 잘 작동하도록
**기본값(defaultProps)**을 설정할 수 있어요.

function Greeting({ name = '손님' }) {
  return <h3>환영합니다, {name}님!</h3>;
}

또는 옛 방식으로는 컴포넌트 외부에 설정할 수도 있어요:

Greeting.defaultProps = {
  name: '손님',
};

하지만 요즘은 함수 인자에서 직접 기본값을 설정하는 방식이 더 일반적입니다.

6. JSX에서 props 사용 시 주의사항

  • JSX 안에서는 {} 중괄호로 감싸서 표현식을 넣어요.
  • 문자열 외에도 숫자, 배열, 객체, 함수도 모두 props로 전달 가능해요.
function Message({ count }) {
  return <p>현재 알림: {count}개</p>;
}

<Message count={5} />

7. props에 함수 전달하기 (이벤트 핸들링)

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

function App() {
  const handleClick = () => {
    alert('버튼이 눌렸어요!');
  };

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

➡️ props는 단순 데이터뿐 아니라 함수도 전달할 수 있어요.
이렇게 하면 자식 컴포넌트에서 부모의 로직을 호출할 수 있게 됩니다!

8. props는 읽기 전용! 직접 변경 금지 ❌

function Info({ name }) {
  name = '변경 시도'; // ❌ 에러는 아니지만, 절대 이렇게 하지 마세요!
  return <p>{name}</p>;
}

props는 부모가 주는 값이기 때문에 자식 컴포넌트에서 변경하면 안 됩니다.
값을 바꾸고 싶다면, **상태(state)**로 변경하여 부모에서 컨트롤해야 해요.

9. 복잡한 구조 분해 패턴

function Article({ title, author: { name, age }, tags }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>작성자: {name} ({age}세)</p>
      <ul>
        {tags.map(tag => <li key={tag}>{tag}</li>)}
      </ul>
    </div>
  );
}

<Article
  title="React 시작하기"
  author={{ name: '홍길동', age: 32 }}
  tags={['react', 'hooks', 'props']}
/>

➡️ 이런 식으로 중첩된 props 구조도 구조 분해로 깔끔하게 처리할 수 있어요!

10. 주의할 점 정리

항목 주의사항
props는 읽기 전용 자식 컴포넌트에서 직접 수정 금지
구조 분해 할당 권장 코드 가독성이 좋아지고 유지보수 용이
기본값 설정 가능 { name = '손님' }처럼
함수도 전달 가능 이벤트 처리 로직을 props로 분리 가능
중첩 객체 구조도 분해 가능 author: { name, age } 등

마무리하며

React에서 props는 컴포넌트 간의 데이터 전달 수단이자,
컴포넌트를 더 유연하고 재사용 가능하게 만드는 핵심 요소입니다.

props를 이해하고, 구조 분해 할당으로 코드를 간결하게 정리하는 습관을 들이면
더 읽기 쉬운 코드를 만들 수 있어요. ✨

다음 글에서는 props와 state가 어떻게 상호작용하며 구성되는지,
그리고 props를 통해 부모에서 자식으로만 흐르는 단방향 데이터 흐름에 대해 더 자세히 다뤄볼게요! 🧭

답글 남기기