react di 하기

react di 하기

react에서 component를 props로 넘겨주고 싶을 때가 있다. 그래서 쓴다.

넘길 때

render:function(){
    let gameList = this.props.gameList;
    const scoreBox = (item, upMark, downMark)=>(<MScoreBox key={item['gidx']} data={item} upMark={upMark} downMark={downMark}/> );

    return(
        <div>
            <DateRoller />
            <MScoreBoxList category="baseball" scoreBox={scoreBox} gameList={gameList} cookieName="BaseBallBookmark" />
        </div>
    )

}

받을 때

<ul className={"list_score favorite " + none}>
    {normalGameList.map((item, key)=>{
        return (this.props.scoreBox(item, this.handleUpBookmark, this.handleDownBookmark ));
    })}

</ul>

요약을 하자면

component를 props로 넘길 때 함수에 싸서 넘긴다.

이걸 일급함수 라고 하는데 일급 함수는 Parameter로 넘길 수 있다.

일급 함수는 아래와 같이 생겼다.

const fn_1st = ( parameter1, parameter2 ) => (<Component_01 param1={parameter1} param2={parameter2} />)

=> 다음에 나오는 괄호 안에 있는 것(object)을 return한다.

이 방식으로 react에서 component를 di할 수 있다.

end.