#TIL 19일차(React props)

---

Props란?

상위(부모) 컴포넌트가 하위(자식) 컴포넌트에 데이터를 전달할 수 있게 해주는 방법

• 읽기 전용으로 취급하며 하위(자식) 컴포넌트는 props를 수정할 수 없다.
• 컴포넌트 간에 단방향 데이터 흐름을 갖는다.

코드 예시

이번 개인과제로 제출한 Todo List의 코드를 가져왔다.

📌 전달하는 부분

//App.jsx
{goals.map((goal) => (
  <li key={goal.id} style={goalStyle}>
    <h3>{goal.title}</h3>
    <span>{goal.content}</span>
    {/* Todo 삭제 및 완료 버튼 */}
    <div style={buttonContainerStyle}>
      <Button 
        goal={goal} 
        goals={goals} 
        setGoals={setGoals} 
        doneGoals={doneGoals} 
        setDoneGoals={setDoneGoals} 
        isDoneList={false} 
      />
    </div>
  </li>
))}

• "goal" 는 각 항목의 데이터, "setGoals"는 Todo 목록을 업데이트 하는 함수 등 Button 컴포넌트에 여러 'props'를 전달하고 있는 걸 확인할 수 있다.

📌 사용하는 부분

//Button.jsx
import React from 'react';

const Button = ({ goal, goals, setGoals, doneGoals, setDoneGoals, isDoneList }) => {
  // 특정 Todo를 삭제하는 함수
  const removeGoal = (id) => {
    if (isDoneList) {
      setDoneGoals(doneGoals.filter((goal) => goal.id !== id));
    } else {
      setGoals(goals.filter((goal) => goal.id !== id));
    }
  };

  // Todo의 완료 상태를 변경하는 함수
  const changeGoal = (id) => {
    const updatedGoals = isDoneList ? doneGoals.filter((goal) => goal.id !== id) : goals.filter((goal) => goal.id !== id);
    const targetGoal = isDoneList ? doneGoals.find((goal) => goal.id === id) : goals.find((goal) => goal.id === id);

    if (isDoneList) {
      setDoneGoals(updatedGoals);
      setGoals([...goals, { ...targetGoal, complete: false }]);
    } else {
      setGoals(updatedGoals);
      setDoneGoals([...doneGoals, { ...targetGoal, complete: true }]);
    }
  };

  return (
    <>
      <button onClick={() => removeGoal(goal.id)} className='deletebtn'>삭제하기</button>
      <button onClick={() => changeGoal(goal.id)} className={goal.complete ? 'incomplete-btn' : 'complete-btn'}>
        {goal.complete ? "취소" : "완료"}
      </button>
    </>
  );
};

export default Button;

• 자식 컴포넌트인 Button.jsx에서는 'props'로 전달된 값을 구조 분해 할당을 통해 사용하고 있는 걸 알 수 있다.

⭐️ 여기서 구조분해 할당이란?

JS 문법 중 하나로 배열이나 객체의 속성을 쉽게 추출하여 개별 변수에 할당할 수 있게 해준다