React의 컴포넌트와 Props

- 컴포넌트(Component)

🤔 Component(컴포넌트)란?
컴포넌트는 재사용 가능한 독립적인 코드 덩어리를 의미한다. React에서는 UI를 여러 개의 컴포넌트로 분리하고, 이렇게 분리한 각 컴포넌트를 조립하여 전체 어플리케이션을 구축한다. 각 컴포넌트는 독립적으로 동작하며, 주어진 props에 따라 UI를 렌더링한다.

📌 컴포넌트 예시

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;

위 코드에서 'Greeting'은 React 컴포넌트이다. 코드를 통해 알 수 있듯이 React에서의 컴포넌트는 그저 하나의 함수를 의미한다. 물론 이는 함수형 컴포넌트에 해당하며 React에서는 함수형 컴포넌트와, class형 컴포넌트가 있다. 위 Greeting 컴포넌트는 'props' 라는 파라미터를 받아 jsx코드를 반환한다.

- React의 속성 (Props)

🤔 Props(속성)이란?
컴포넌트에 전달되는 값을 말한다. 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 자식 컴포넌트는 이 값을 읽기만 할 수 있고 변경할 수는 없다.

📌 Props 예시

import React from 'react';
import Greeting from './Greeting';

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

export default App;

위의 App 컴포넌트에서 name이라는 prop을 Greeting 컴포넌트로 전달하고 있다. Greeting 컴포넌트는 이 name prop을 사용해서 "Hello, World"를 출력한다. 위에서 언급 했듯이, props는 읽기 전용으로 취급되어야 한다. 즉, 컴포넌트는 자신의 props를 직접 변경할 수 없다. 이는 React의 "단방향 데이터 흐름"을 뒷받침하는 중요한 원칙이다. 이 원칙에 따라, 한 컴포넌트의 자식 컴포넌트는 부모 컴포넌트가 자신에게 전달한 props를 변경할 수 없다. 또한, props는 다양한 형태의 데이터를 전달할 수 있다. JavaScript의 원시 데이터 타입(문자, 숫자, 불리언), 객체, 함수 등 어떤 형태의 데이터라도 props를 통해 전달할 수 있다. 이는 아래 두 번째 예시 코드를 통해 확인해보자.

📌 Props 예시(2)

<Movie title="Interstellar" director="Christopher Nolan" year={2014} />

위 코드에서는 'Movie' 컴포넌트에게 여러 개의 props를 전달하고 있다. 이 때, 'Movie' 컴포넌트 내에서는 아래와 같이 props를 사용할 수 있다.

function Movie(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>Directed by {props.director}</p>
      <p>Released in {props.year}</p>
    </div>
  );
}

위와 같이 props를 통해 'Movie' 컴포넌트는 필요한 정보를 받아 화면에 렌더링 한다.

- 컴포넌트 간의 데이터 전달

• 부모 -> 자식 컴포넌트 데이터 전달: 위의 props 예시에서와 같이 부모 컴포넌트는 props를 통해 자식 컴포넌트에게 데이터를 전달한다.
• 자식 -> 부모 컴포넌트 데이터 전달: 이 경우, 자식 컴포넌트는 부모 컴포넌트로 직접적으로 데이터를 전달할 수 없다. 대신 부모 컴포넌트에서 함수를 만들고, 이 함수를 자식 컴포넌트에게 props로 전달하여 자식 컴포넌트에서 이 함수를 호출하게 하는 방식을 사용한다.

📌 자식 -> 부모 컴포넌트의 데이터 전달 예시

import React, { useState } from 'react';

function Parent() {
  const [message, setMessage] = useState("");

  // handleMessage 함수 선언
  const handleMessage = (msg) => {
    setMessage(msg);
  };

  return (
    <div>
      // onMessage 속성을 통해 Child 컴포넌트에 handleMessage 함수 전달
      <Child onMessage={handleMessage} />
      <p>Message from child: {message}</p>
    </div>
  );
}

function Child({ onMessage }) { // onMessage props를 받아옴
  const sendMessage = () => {
    // snedMessage 함수 내에서 onMessage를 사용하여 Parent 컴포넌트에게 데이터 전달
    onMessage("Hello from child!");
  };

  return <button onClick={sendMessage}>Send Message</button>;
}

export default Parent;

위의 코드에서 'Parent' 컴포넌트는 'Child' 컴포넌트로 handleMessage 함수를 props로 전달한다. Child 컴포넌트는 이 함수를 호출하여 Parent 컴포넌트에게 메시지를 전달한다.