[노마드/React로 영화 웹 서비스 만들기] Ch04 PROPS | 0. Props

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  props

---

<script type="text/babel">
    function Btn({text, big}) {
        return (
            <button style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
                fontSize: big ? 18 : 16
            }}>{text}</button>
        );
    }
    function App() { 
        return(
            <div>
                <Btn text="Save Changes" big={true}/>
                <Btn text="Continue" big={false}/>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root); 
</script>

👉🏻먼저 Btn이라는 컴포넌트를 만들고 재사용성을 높여보자!

function App() { 
    return(
        <div>
            <Btn text="Save Changes" big={true}/>
            <Btn text="Continue" big={false}/>
        </div>
    );
}

👉🏻App 컴포넌트에서 Btn 컴포넌트를 2번 사용하는데 HTML tag에 속성을 지정하듯 props를 전달할 수 있다.

• text와 big이라는 props를 각각 버튼에 맞게 지정한다.
• 해당 props는 {text: "Save Changes", big: true} 와 같이 object 형태로 들어간다.

function Btn({text, big}) {
    return (
        <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 16
        }}>{text}</button>
    );
}

• props를 {text, big} 형태로 받으면 바로 이름을 붙여 사용할 수 있다.
• 버튼 폰트 사이즈를 정할 때 big props를 사용해 big이 true이면 18, false이면 16으로 설정한다.
• 버튼 안에는 text에 담긴 내용을 출력한다.

짠 이렇게 나옴미당!