REACT - props란?

REACT - props란?

리액트의 props는 컴포넌트 간의 데이터 전달에 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달함으로써 자식 컴포넌트는 전달받은 데이터를 사용하여 동적으로 UI를 생성하거나 작업을 수행할 수 있습니다.

props는 다양한 타입의 값을 전달할 수 있습니다. 문자열, 숫자, 불리언, 객체, 배열 등을 props로 전달할 수 있으며, 필요에 따라 다양한 데이터를 전달할 수 있습니다. 또한, 함수나 콜백을 props로 전달하여 자식 컴포넌트에서 이벤트 핸들링이나 상태 변경과 같은 작업을 부모 컴포넌트로 전달할 수도 있습니다.

부모 컴포넌트에서 props를 전달할 때는 JSX 문법을 사용합니다. 태그 속성으로 props를 지정하거나 중괄호 {} 안에 JavaScript 표현식을 넣어 전달할 수 있습니다. 자식 컴포넌트에서는 props 객체로 전달받은 값을 참조하여 사용합니다.

예를 들어, 다음은 name과 age라는 두 개의 props를 가진 Person 컴포넌트를 사용하는 예입니다:

const Person = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
};

const App = () => {
  return <Person name="John" age={25} />;
};

위의 예시에서 Person 컴포넌트는 name과 age라는 props를 받아와서 출력합니다. App 컴포넌트에서 Person 컴포넌트를 사용할 때 name="John"과 age={25}와 같이 props를 전달합니다.

props는 읽기 전용으로 취급되므로 자식 컴포넌트에서 props의 값을 변경하려고 하면 에러가 발생합니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서는 부모 컴포넌트에서 값을 변경하고 다시 props를 통해 자식 컴포넌트에 전달해주어야 합니다.

리액트의 props는 컴포넌트 간의 상호작용과 데이터 전달을 단순하게 구현하는 데에 큰 도움을 줍니다. 컴포넌트를 재사용하고 유연하게 조합하여 강력하고 유지보수 가능한 UI를 구축하는 데에 활용할 수 있습니다.

오늘 한 예제들을 더 보시죠

- 컨포넌트 예제2

import React from "react";
import ReactDOM from "react-dom/client";
function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}
function App(){
    return (
    <div>
        <Welcome name = "kebab" />
        <Welcome name = "kebab00" />
        <Welcome name = "kebab000" />
    </div>
    )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

//kebab
//kebab00
//kebab000

- props 예제

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name = "kebab00" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

- 끝!