SSONG Cloud

Props 본문

프로그래밍/React

Props

SSONGMI 2022. 9. 27. 12:53
반응형

1. Reference

https://nomadcoders.co/react-for-beginners

https://ko.reactjs.org/docs/faq-state.html

 

2. 개념

 

- Props란

: 상위 컴포넌트에서 하위 컴포넌트로 전달하는 값이다.

: 상위 컴포넌트에서 사용한 이름을 그대로 하위 컴포넌트에서 사용해야 한다.

 

3. 예제

: Props를 이용해서 하위 컴포넌트에 스타일을 적용해 보고자 한다.

<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        const Btn = ({ text, fontSize = 12 }) => {
            return (
                <button
                    style={{
                        backgroundColor: "tomato",
                        borderRadius: 10,
                        border: "1px solid tomato",
                        color: "white",
                        padding: "10px 5px",
                        fontSize,
                    }}
                >
                    {text}
                </button>
            );
        };
        Btn.propType = {
            text: PropTypes.string.isRequired,
            fontSize: PropTypes.number,
        };
        const App = () => {
            return (
                <div>
                    <Btn text="Save Changes" fontSize={18} />
                    <Btn text="Continue" />
                </div>
            );
        };
        ReactDOM.render(<App />, root);
    </script>
</html>
반응형
저작자표시

'프로그래밍 > React' 카테고리의 다른 글

Effect  (0) 2022.09.28
React 기본 개념  (0) 2022.09.26
'프로그래밍/React' Related Articles more
Comments