[React] props

props란?

부모 컴포넌트에서 자식 컴포넌트에게 전달하는 값이다.

부모 컴포넌트에서 값을 받기 때문에 자식 컴포넌트는 값을 수정할 수 없는 '읽기 전용' 상태가 되며, 부모 컴포넌트에서 prop의 값이 변경이 된다면 자식 컴포넌트에서 해당 값이 리렌더링이 된다.

 

코드를 통하여 확인을 해보자.

import React, { useEffect, useState } from "react";
import axios from 'axios';
import MypageLeft from "./MypageLeft";
import config from '../../../config';

function MypageLeftContent() {
    const userId = localStorage.getItem('userId')
    const [leftData, setLeftData] = useState({
        userName: "",
        personalCareer: "",
        userIntro: "",
        email: "",
        jobPositions: "",
        techStacks: [],
    });

    const api = axios.create({
        baseURL: config.baseURL
      });

    useEffect(() => {
        api.get(`/api/personal/${userId}`)
            .then(response => {
                const jobPositions = response.data.jobPositions.map(position => position.job.jobName).join(", ");
                const techStacks = response.data.techStacks.map(stack => ({
                    techName: stack.tech.techName,
                    techUrl: stack.tech.techUrl
                }));
                setLeftData({
                    userName: response.data.user.userName,
                    personalCareer: response.data.personalCareer,
                    userIntro: response.data.user.userIntro,
                    email: response.data.user.email,
                    jobPositions: jobPositions,
                    techStacks: techStacks
                });
            })
            .catch(error => {
                console.error("leftData 호출 실패", error);
            });
    }, []);

    return (
        <div>
            <MypageLeft
                userName={leftData.userName}
                personalCareer={leftData.personalCareer}
                userIntro={leftData.userIntro}
                email={leftData.email}
                jobPositions={leftData.jobPositions}
                techStacks={leftData.techStacks}
            />
        </div>
    );
};

export default MypageLeftContent;



--------------------------------------------------------------------------------

import React from "react";
import "./../../styles/MypageLeft.css";

const MypageLeft = ({ userName, personalCareer, userIntro, email, jobPositions, techStacks }) => {
    const jobNames = jobPositions.split(", ").map(job => job.trim());

    return (
        <div>
            <div className="mypage_user_title">
                <p>{userName} | {personalCareer}</p>
            </div>
            <div className="mypage_user_left">
                <div className="mypage_user_intro">
                    <span>{userIntro}</span>
                </div>
                <div className="mypage_user_info">
                    <div className="mypage_user_content">
                        <div>이메일</div>
                        <div>희망분야</div>
                        <div>기술스택</div>
                    </div>
                    <div className="mypage_user_detail">
                        <div className="email">{email}</div>
                        <div className="job">
                            {jobNames.map((job, index) => (
                                <span key={index} className="job-tag">#{job}</span>
                            ))}
                        </div>
                        <div className="mypage_user_tech">
                            <ul>
                                {techStacks.map((techItem, index) => (
                                    <li key={index}>
                                        <img src={techItem.techUrl} alt={techItem.techName} />
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MypageLeft;

 

첫번째 코드가 부모 컴포넌트이고 두번째 코드가 자식 컴포넌트이다.

 

위에서 정의한 props를 쓰게 된다면,

return (
        <div>
            <MypageLeft
                userName={leftData.userName}
                personalCareer={leftData.personalCareer}
                userIntro={leftData.userIntro}
                email={leftData.email}
                jobPositions={leftData.jobPositions}
                techStacks={leftData.techStacks}
            />
        </div>
    );

자식 컴포넌트인 MypageLeft에 어떠한 값을 props를 통하여 전달할 건지를 정의를 해준다.

const MyPageLeft = { {userName, personalCareer, userIntro, email, jobPositions, techStacks} } => {
	
}

export default MypageLeft;

자식 컴포넌트는 부모 컴포넌트에서 정의한 props를 전달 받기 위해 위에 코드처럼 작성해주면 된다.