#6 props - row.js

📍props란?

 : 상속하는 부모 컴포넌트로부트 자녀 컴포넌트에 데이터 전달
 : 읽기전용으로 자녀 컴포넌트 입장에서는 변하지 않는다 (변하고자 한다면 부모 컴포넌트에서 state를 변경해줘야함) 

 

 

📍사용법 

 

1) 상위 컴포넌트에서 Props 지정하여 넘기기  

 

-- App컴포넌트에서 자식은 row 컴포넌트를 포함한다고 가정

- App컴포넌트에서 row 컴포넌트에 props  값 지정 

- row 컴포넌트를 import 해 줄 것

 

 

• App.js

import React from "react";
import Row from "./Row";

function App() {
    return(
         <Row propValue="헬로 리액트!">Bye 리액트!</MyComponent>
    );
}
export default App;

 

 

2) 하위 컴포넌트에서 받아 Props  렌더링하기  

 

- Row 컴포넌트에서 상위 컴포넌트로 부터 받은 props 데이터를 뷰에 렌더링

 

 

• Row.js

import React from "react";

function Row(props) { //props라는 매개변수 사용 
    return(
        <div>
            {props.propValue}, {props.children}
        </div>

    );
}
export default Row;

 

 

- {props.propValue} : 상위 컴포넌트에서 props 값을 propsValue로 전달했기 때문에 {propsValue}로 전달 

 

-  {props.children}  : 리액트 컴포넌트 태그 사이에 내용을 보여주는 props 속성입니다.

  상위 컴포넌트에서 태그 사이에 작성한 "Bye 리액트!" 가 출력됩니다. 

 

출처: 코딩팩토리

 

 

 

 

 

📍props 타입

☑️문자열 타입

 

- 프로퍼티 타입이 문자열인 경우, 큰 따옴표 "" 사용

 

<Row propValue="헬로 리액트!">

 

 

 

☑️문자열 이외

 

- 문자열 이외는 { } 중괄호 사용

<MyComponent 
	boolProp= {true} //boolean
	arrProp= {['a','b','c']} //배열
	objProp= {{name:'코딩젤리', title:'헬로리액트!'}} //객체
	funcProp= {() => { alert('알림창'); }}  //함수 
    func = { funcname} // 함수
/>

출처: https://life-with-coding.tistory.com/509 [코딩젤리:티스토리]

 

 

 

📍응용

 

App.js

 

 

import Row from "./Row.js";

..
function App() {
<Row title="Trending Now" id="TN" fetchUrl={requests.fetchTrending} />
      <Row
        title="Action Movies"
        id="AM"
        fetchUrl={requests.fetchActionMovies}
      />
      <Row
        title="Comedy Movies"
        id="CM"
        fetchUrl={requests.fetchComdeyMovies}
      />
      }

 

 

 

 

 Row.js

 

const Row = ({ title, id, fetchUrl }) => {

return (
    <div>
      <h2>{title}</h2>
      <div calssName="slider">
        <div className="slider__arrow-left">
          <span
            className="arrow"
            onClick={() => {
              document.getElementById(id).scrollLeft -= window.innerWidth - 80;
            }}
          >
            {"<"}
          </span>
        </div>
        <div id={id} className="row__posters">
          {movies.map((movie) => (
            <img
              key={movie.id}
              className="row__poster"
              src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
              alt={movie.name}
              onClick={() => handleClick(movie)}
            />
          ))}
        </div>
        <div className="slider__arrow-right">
          <span
            className="arrow"
            onClick={() => {
              document.getElementById(id).scrollLeft += window.innerWidth - 80;
            }}
          >
            {">"}
          </span>
        </div>
      </div>
    </div>
  );
};

 

 - const Row = ({ title, id, fetchUrl }) => { ... } : 화살표 함수 이용해 선언과 동시에 속성 추출 

- 사용할 부분에 { } 사용하여 속성을 개별적으로 추출하여 사용하기 때문에 props 객체를 사용하지 않아도 됨

클래스형 방법  :

 

export default class Board extends Component {

  renderSquare(i) {

    return <Square value={i} />;

  }

--> 부모 컴포넌트 

aProps - value

this.state.a - i (상태) 

 

export default class Square extends React.Component {

  render() {

    return <button className="square">{this.props.value}</button>;

  }

}

--> 자식 컴포넌트 

this.props.aProps - this.props.value