본문 바로가기
CS Study/React

4. Props

Ryannn 2022. 4. 18. 17:43

#Props를 사용하지 않았을 때

 

두 가지 버튼 컴포넌트를 만들고

각각의 css 프로퍼티를 형성함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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/@babel/standalone/babel.min.js"></script>
    <div id = "root"></div>
    <script type = "text/babel">
        function SaveBtn(){
            return <button 
            style ={{
                backgroundColor : "tomato",
                borderRadius : 10,
                border : 0,
                padding : "10px, 20px",
                color : "white"
            }}>Save Changes</button>
        }
        function ConfirmBtn(){
            return <button
            style ={{
                backgroundColor : "tomato",
                borderRadius : 10,
                border : 0,
                padding : "10px, 20px",
                color : "white"
            }}>Confirm</button>
        }
        function App(){
           
            return (
                <div>
                    <SaveBtn />
                    <ConfirmBtn />
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>

 

#Props를 사용할 때

 

하나의 버튼 컴포넌트만 만들어주고

App컴포넌트의 두 가지 버튼에 각각 다른 Props를 부여함.

 

이때 Props는 객체이다.

아래 코드 경우, Btn은 {text : value, onClick : revertValue} 라는 

Props 객체를 받고 있음.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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/@babel/standalone/babel.min.js"></script>
    <div id = "root"></div>
    <script type = "text/babel">
        function Btn(props){//컴포넌트로 부터 props 인자를 받음. props는 객체
            return <button 
            onClick = {props.onClick}
            style ={{
                backgroundColor : "tomato",
                borderRadius : 10,
                border : 0,
                padding : "10px, 20px",
                color : "white"
            }}>{props.text}</button>
        }
       
        function App(){
            const [value, changeValue] = React.useState("Save Changes");
            const revertValue = ()=> {
                changeValue("Revert value");
            }
            return (
                <div>
                    <Btn text = {value} onClick = {revertValue}/>
                    <Btn text = "Confirm" />
                </div>
            )//props라는 객체에 text 자료와 onClick 자료를 넣어줌
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>

 

#PropTypes 사용

 

Prop들의 자료형(type)을 미리 정해줌으로써

개발자의 실수를 방지함. 

 

또한 isRequired를 통해 컴포넌트에게

필요한 Props들이 넘어갔는지 console창에서

확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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/@babel/standalone/babel.min.js"></script>
    <script src = "https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
    <div id = "root"></div>
    <script type = "text/babel">
        function Btn(props){
            return <button 
            onClick = {props.onClick}
            style ={{
                backgroundColor : "tomato",
                borderRadius : 10,
                border : 0,
                padding : "10px, 20px",
                color : "white",
                fontSize : props.fontSize
            }}>{props.text}</button>
        }
        const MemorizedBtn = React.memo(Btn);
        Btn.propTypes ={//prop들의 type을 미리 결정해줌 -> 실수 방지, isRequired : props가 지정이 안되어있으면 에러를 띄워줌
            text : PropTypes.string.isRequired,
            fontSize : PropTypes.number.isRequired

        }
        function App(){
            const [value, changeValue] = React.useState("Save Changes");
            const revertValue = ()=> {
                changeValue("Revert value");
            }
            return (
                <div>
                    <MemorizedBtn text = {value} onClick = {revertValue} fontSize = {38}/>
                    <MemorizedBtn text = "Confirm" />
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>

 

#React.Memo() 사용

 

컴포넌트의 state가 변화할 때마다

모든 컴포넌트가 항상 re-render됨.

-> 컴포넌트가 매우 많을 경우 문제가 될 수 있음!

 

그렇기 때문에 컴포넌트를 React.Memo(component)로

선언하고 Props가 있는 컴포넌트들만

변화가 있을 때 re-render됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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/@babel/standalone/babel.min.js"></script>
    <div id = "root"></div>
    <script type = "text/babel">
        function Btn(props){
            return <button 
            onClick = {props.onClick}
            style ={{
                backgroundColor : "tomato",
                borderRadius : 10,
                border : 0,
                padding : "10px, 20px",
                color : "white"
            }}>{props.text}</button>
        }
        const MemorizedBtn = React.Memo(Btn);
        //첫번째 Btn은 re-render을 해야하지만, 두번째 Btn은 변동사항이 없기 때문에 re-render을 할 필요가 없음, 하지만 부모인 App컴포넌트의 state가 변하기 때문에 두 Btn모두 re-render됨.
        //그래서 React.Memo를 이용해서 props가 있는 Btn만 render하도록 함.
        function App(){
            const [value, changeValue] = React.useState("Save Changes");
            const revertValue = ()=> {
                changeValue("Revert value");
            }
            return (
                <div>
                    <MemorizedBtn text = {value} onClick = {revertValue}/>
                    <MemorizedBtn text = "Confirm" />
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>

    
</body>
</html>
저작자표시 (새창열림)

'CS Study > React' 카테고리의 다른 글

5. Effects  (0) 2022.04.18
3. State  (0) 2022.04.16
2. JSX  (0) 2022.04.15
1. 왜 React 인가?  (0) 2022.04.15

'CS Study/React' Related Articles

티스토리툴바