[새싹(SeSAC) 프론트엔드] day30 221125

직업훈련/새싹(SeSAC)

[새싹(SeSAC) 프론트엔드] day30 221125

뉼👩🏻‍💻 2022. 11. 25. 14:46

728x90

SMALL

📍defaultProps

: props 를 지정하지 않았을 때 기본적으로 사용할 값을 설정

app.jsx

function App() {
  return (
    <div className="App">
      <DefaultProps name="yuulya" />
      <DefaultProps />
    </div>
  );
}

DefaultProps.jsx

import React from "react";

const DefaultProps = (props) => {
  const { name } = props;
  return <div>안녕하세요 제 이름은 {name}입니다</div>;
};

// ** 컴포넌트이름.defaultProps
DefaultProps.defaultProps = {
  name: "이름없음",
};

export default DefaultProps;

📍props.children

: 컴포넌트 태그 사이에 넣은 값을 조회할 때 사용

Wrapper.jsx

import React from "react";

const Wrapper = ({children}) => {       //객체가 children 인 경우만 정상적으로 실행됨 
  const style = {
    border: "3px solid red",
    padding: "20px",
  };
  return <div style={style}>
    {children}
  </div>;
};

export default Wrapper;

app.js

function App() {
  return (
    <div className="App">
      {/* <DefaultProps name="yuulya" />
      <DefaultProps /> */}
      <Wrapper>
        <CreateHeader />
        <CreateBody />
        <CreateFooter />
      </Wrapper>
    </div>
  );
}

** children은 예약어라서 이러한 형식으로 사용하고 싶다면 children을 써줘야 된다!

propTypes

: 특정 컴포넌트에 꼭 전달되어야 하는 프로퍼티를 필수 프로퍼티로 지정하거나 프로퍼티의 타입을 지정할 때 사용

import PropTypes from 'prop-types';

proptypes 와 app.js에서의 타입이 다르면 에러가 나지만 값은 정상적으로 출력됨

PropTypesComponent.jsx

import React from "react";
import PropTypes from "prop-types";

const PropTypesComponent = ({ name }) => {
  return <div>안녕하세여 제 이름은 {name} 입니다</div>;
};

PropTypesComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

export default PropTypesComponent;

📍배열 컴포넌트

- 출력해야 하는 정보가 너무 많은 경우

- 서버에서 데이터를 받아오는 경우 몇개의 데이터가 넘어올지 알 수 없는 경우

➡️ map() 함수로 해결

map()함수

: 배열 안의 모든 요소들의 값을 변경해서 새로운 배열을 생성하는 함수

 function App() {
  const movieList = [
    {
      title: "해리포터",
      open: "2002.10.22",
      poster:
        "url1",
    },
    {
      title: "반지의 제왕",
      open: "2002.10.22",
      poster:
        "url2",
    },
    {
      title: "스타워즈",
      open: "2002.10.22",
      poster:
        "url3",
    },
  ];

 return (
    <>
      {movieList.map((movie) => (
        <MovieComponent
          title={movie.title}
          open={movie.open}
          poster={movie.poster}
        />
      ))}
    </>
  );
}

movieComponent.jsx

import React from "react";

const MovieComponent = (props) => {
  const { title, open, poster } = props;
  return (
    <div>
      영화제목 : {title}
      <br></br>
      개봉일 : {open}
      <br></br>
      <img src={poster}></img>
      <br></br>
      <hr />
    </div>
  );
};

export default MovieComponent;