리액트_5_레시피 상세보기 페이지 만들기_2

2020/05/30 - [react] - 리액트 _4_레시피 상세보기 페이지 만들기

리액트 _4_레시피 상세보기 페이지 만들기

이 포스팅에 이어서 작성합니다.

 

 

1. RecipeDetail.js 에다가 디테일을 주기위해 이미지를 넣는다.

 

 

 

 

2. public 안에다가 그림을 붙여넣는다.

3. RecipeDetail.js return 부분에 테이블을 추가하고 안에 이미지를 넣는다.

 return(
        <div className={"row"} style={{"margin":"0px auto", "width":"900px"}}>
            <table className={"table"}>
                <tr>
                    <td colSpan={"3"}>
                        <img src={detail.poster} width={"700"} height={"350"}/>
                    </td>
                </tr>
                <tr>
                    <td colSpan={"3"}>
                        <h3>{detail.title}</h3>
                    </td>
                </tr>
                <tr>
                    <td colSpan={"3"}>
                        <h3>{detail.content}</h3>
                    </td>
                </tr>
                <tr>
                    <td className={"text-center"}><img src={"/inwon.png"}/> </td>
                    <td className={"text-center"}><img src={"/time.png"}/></td>
                    <td className={"text-center"}><img src={"/who.png"}/></td>
                </tr>
                <tr>
                    <td className={"text-center"}>{detail.info1}</td>
                    <td className={"text-center"}>{detail.info2}</td>
                    <td className={"text-center"}>{detail.info3}</td>
                </tr>

            </table>
        </div>
    )

4. 서버 재가동하고 npm start 하면 아래처럼 출력된다. 

5. 요리방법 정보도 출력해보자

테이블 아래에 이 코드를 추가하면 나온다.

 <tr>
                    <td colSpan={"3"}>
                        <h3>요리방법</h3>
                        {detail.foodmake}
                    </td>
                </tr>

근데 한줄에 다 출력해버린다. 이 부분을 split를 이용해서 수정해보자

6. return 밖에 변수를 지정한다.

이때 ^는 정규식 중 하나이기 때문에 역슬러시(\)를 넣어주어야 한다.

<정규식> ^(시작문자), $(끝나는문자)

    const food = String(detail.foodmake)
    const ff = food.split('\^');
    const data = ff.map((m)=>
        <li>{m}</li>
    )

아래 테이블 부분도 수정해준다.

<tr>
  <td colSpan={"3"}>
    <h3>요리방법</h3>
    <ul>
    {data}
    </ul>
  </td>
</tr>

이제 읽기 편하게 번호대로 출력이 된다.

7. 이제 아래부분에 쉐프 정보도 띄워보자

  <tr>
                    <td colSpan={"3"}>
                        <table className={"table"}>
                            <tr>
                                <td rowSpan={"2"} width={"30%"}>
                                    <img src={detail.chef_poster} className={"img-circle"} width={"50"} height={"50"}/>
                                </td>
                                <td>{detail.chef} </td>
                            </tr>
                            <tr>
                                <td>{detail.chef_profile}</td>
                            </tr>
                        </table>
                    </td>
                </tr>

아래부분에 쉐프 정보가 뜬다.