[React] props 사용법

0️⃣ 들어가며

🐸 : React를 처음 접하는 분들에게는 Props라는 단어가 헷갈리고 혼란스러울 수 있어요!!
이 포스팅에서는 React의 기본 개념인 Props를 자세히 설명하고, 각각을 어떻게 활용하는지 쉽고 간단한 예시를 들어 설명해볼게요.

1️⃣ Props란 무엇인가요?

Props는 쉽게말해서 React 컴포넌트에 데이터를 전달하는 방법입니다.
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

바로 예를 들어볼까요?!

🗂️ 예시 폴더구조

📦src
 ┣ 📂components
 ┃ ┗ 📜welcome.tsx
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┗ 📜index.tsx

📜 App.tsx 메인 컴포넌트

🐸 : 아래의 메인 App 컴포넌트에서 Welcome 컴포넌트를 호출하며 name="David" 과 같이 어떠한 값을 넘기는 것을 props 라고해요

import "./App.css";
import Welcome from "./components/welcome";

function App() {
  return (
    <div className="App">
      <Welcome name="David" age={24} gender="male" />
      <Welcome name="Anne" age={17} gender="female" />
      <Welcome name="Lee" age={44} gender="male" />
    </div>
  );
}

export default App;

📜 Welcome 컴포넌트

import React from "react";

const Welcome = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <h2>Your age is {props.age}</h2>
      <h2>Your gender is {props.gender}</h2>
    </div>
  );
};

export default Welcome;

👇🏻 결과물

🐸 : 질문은 받을리가 없겠지만 ~씨 Welcome 컴포넌트로 props 값 뭐뭐 넘겨요라는? 1차원적인? 질문을 받는다면??

🙋🏻 : name, age, gender 세개의 값이 넘어가요! 🐸 : 라고 할 수 있겠죠?

🙋🏻 : 아래 그림의 코드 처럼 꼭 props 라는 이름으로 값을 받아서 props.name, props.age,.. 와같이 props객체의 속성을 참조하는 모양으로 값을 꺼내 써야하나요?!?!


🐸 : 정확이 말하자면 아니요 입니다 props 라는 객체이름으로 받아오는 것은 React에서 표준적으로 사용되는 이름이며, 개발자들 사이에서 공통적으로 정해져 사용되는 네임규칙입니다

const Welcome = (data) => {
  return <div>Hello, {data.name}</div>
  //or
const Welcome = (value) => {
  return <div>Hello, {value.name}</div>
  ...

위와 같이 컴포넌트에 넘긴 값이 기본적으로 담기는 객체의 이름은 개발자가 정하기 따름입니다( 위에서 data, value로 받아온 것처럼 )

✅ 하지만 코드의 가독성과 혼란을 지양하기 위해 범용적으로 쓰이는 props라는 이름을 사용하는것을 추천합니다!
( 🐸 : 꼭 props로 쓰지않아도 에러는 뜨지 않는다는 정도를 알려드리려고 예를 들어봤어요 )

또는

아래와 같이 자바스크립트의 구조분해 문법을 이용해 {name, age, gender} 와 같이 {} 중괄호를 사용해 객체의 값을 구조분해해서 가져오고 있습니다.
( 이때는 컴포넌트에서 넘긴 키값을 똑같이 적어주어야 합니다.name, age, gender )

이는 코드의 가독성을 높이고 Props를 사용하는 과정을 간단하게 만들어줍니다.

import React from "react";
const Welcome = ({ name, age, gender }) => {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <h2>Your age is {age}</h2>
      <h2>Your gender is {gender}</h2>
    </div>
  );
};
export default Welcome;

🚩 : 자바스크립트 구조분해 문법에대해서 헷갈리시는 분들은 다른 포스팅에서 설명해 드리겠습니다!

💬 props로 넘길 수 있는 데이터타입

문자열(String)
숫자(Number)
불리언(Boolean)
함수(Function)
배열(Array)
객체(Object)
React 컴포넌트(React Component)

// 문자열(String)
<Welcome name="John" />

// 숫자(Number)
<Counter value={10} />

// 불리언(Boolean)
<ShowMessage showMessage={true} />

// 함수(Function)
<Button onClick={() => alert('Clicked!')} />

// 배열(Array)
<List items={['apple', 'banana', 'orange']} />

// 객체(Object)
<UserInfo user={{ name: 'John', age: 30 }} />

// React 컴포넌트(React Component)
<ParentComponent>
  <ChildComponent />
</ParentComponent>

💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.! talk!talk!