본문 바로가기
2222
카테고리 없음

react.js로 영화 웹 서비스 만들기 -3 [props 이용]

by PARK TAE JOON 2021. 7. 2.

prop를 지정해주고 컴포넌트에서 적용하는 방법

1번째 방법

function Food(prpos) {
    return <h1>i like {props.fav}</h1>
}

function App() {
    return (
        <div>
            <h1>hello</h1>
            <Food fav = "kimchi" />
        </div>
    )
}

2번째 방법

function Food({fav}) { // 오브젝트의 특정 속성값만 가져오기
    return <h1>i like {fav}</h1>
}

function App() {
    return (
        <div>
            <h1>hello</h1>
            <Food fav = "kimchi" />
        </div>
    )
}

동적으로 component 다루기

별도의 api를 내가 가져왔다고 가정하고 가상의 api를 내가 직접 배열로 만들어서 해당 값들을 불러오는걸 연습해보자.
javascript에서 배웠던 것을 그대로 기반으로 해서 생각보다 쉽다는 것을 알 수 있다.
리액트의 편리함에 대해 점점 더 채감하고 있는 것 같다.

댓글