[React] props / props 로 상세페이지 만들기

props

 

자식 component가 부모에 있는 state 를 쓰고 싶으면

props 로 전송해서 써야한다.

/*eslint-disable*/
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, setLike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);

  function changetitle() {
    let copy = [...title];
    copy[0] = "여자 코트 추천";
    setTitle(copy);
  }

 ...

  return (
  

      {title.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
              }}
            >
              {title[i]}{" "}
              <span
                onClick={() => {
                  addLike(i);
                }}
              >
                👍
              </span>{" "}
              {like[i]}
            </h4>
            <p>2022-07-15</p>
          </div>
        );
      })}
      {modal == true ? (
        <Modal changetitle={changetitle} color={"skyblue"} title={title} />
      ) : null}
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal" style={{ background: props.color }}>
      <h4>{props.title[0]}</h4>
      <p>date</p>
      <p>detail</p>
      <button onClick={props.changetitle}>글수정</button>
    </div>
  );
}

export default App;

App component 에 title 이라는  state 를 Modal component로 전송하고 싶으면

그 Modal component 넣는 곳에

title={title} 를 추가해주고     (첫번째 title 은 작명해주면된다. 보통은 같게함)

Modal component 선언한 곳에 파라미터로 props를 써주고

Modal 안에서 사용할 때에는 props.title 로 써주면된다.

 

 

자식 component 가 부모 component 로 보내는 것은 불가능하다. 나란할때도 마찬가지이다.

---

전송하는 props 쓸 때 state 가 아니라 string 도 보낼 수 있다.

color="skyblue" 이런것도 전송할 수 있다는 의미이다.

---

props 로 상세페이지 만들기

 

각 게시물을 눌렀을 때 모달창이 뜨는데

그 모달창에는 해당 게시물의 제목이 뜨게 하려고 한다.

 

그래서 이 기능을 위해 detailTitle 이라는 state 를 하나 새로 만들었다.

/*eslint-disable*/
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, setLike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [detailTitle, setDetailTitle] = useState(0);

  ...

  return (
    <div className="App">
 ...

      {title.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setDetailTitle(i);
                setModal(!modal);
              }}
            >
              {title[i]}{" "}
...
            </h4>
            <p>2022-07-15</p>
          </div>
        );
      })}
      {modal == true ? (
        <Modal detailTitle={detailTitle} color={"skyblue"} title={title} />
      ) : null}
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal" style={{ background: props.color }}>
      <h4>{props.title[props.detailTitle]}</h4>
      <p>date</p>
      <p>detail</p>
      <button>글수정</button>
    </div>
  );
}

export default App;

그리고 게시물 클릭을 할 때 detailTitle 의 값이 i가 되도록한다.(setDetailTitle 을 통해서)

이 detailTitle 을 자식 component 로 보내서 사용하면 되겠다.

 

이게 동적인 UI를 만드는 방법이다.

화면 디자인을 해놓고

지금 UI 상태를 state 로 저장하고 

state가 어떨 때 어떤 UI를 보여줄지 작성하면 된다.

 

---

defaultProps

 

React에서 defaultProps는 컴포넌트가 가지는 기본 props 값을 정의할 수 있는 기능이다.

만약, 컴포넌트에 어떤 props가 전달되지 않았을 때, defaultProps에 정의된 기본값이 대신 사용된다.

이는 컴포넌트가 예상대로 작동할 수 있도록 보장하는데 유용하다.

 

사용방법

defaultProps를 사용하는 방법은 다음과 같다.

function MyComponent(props) {
  // ...
}

MyComponent.defaultProps = {
  foo: "default value for foo",
  bar: 42
};

위 예시에서 MyComponent 컴포넌트는 foo와 bar라는 두 개의 props를 가지고 있다.

그리고, defaultProps 객체를 사용하여 기본값을 정의하고 있다.

이제, MyComponent가 다음과 같이 렌더링된다면:

<MyComponent foo="custom value for foo" />

foo에는 "custom value for foo"가 전달되었지만, bar에는 전달되지 않았다.

이 경우, MyComponent는 bar의 기본값으로 42를 사용하게 된다.

즉, defaultProps를 사용하면 컴포넌트가 기대하는 props가 전달되지 않았을 때, 

기본값을 사용하여 예상대로 작동할 수 있도록 보장할 수 있다.