Jieunny의 블로그

Props 본문

React/Nomadcoders

Props

Jieunny 2021. 11. 29. 14:53
  • Prop : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법.
  • App() 에 있는 컴포넌트에 다는 것들은 오직 props.
  • Memo : props가 변경되지 않는 컴포넌트는 re-render 해주지 않는다. 
    <!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        function Btn({text, changeValue}){  //여기다가 써줘야 됨. 여기 위에 changeValue도 바뀌어야함. 여기 쓰이는 onClick은 이벤트 리스너가 아니라 단지 props일 뿐.
            return <button 
                onClick={changeValue}
                style={{
                backgroundColor : "tomato",
                color: "white",
                padding:"10px 20px",
                border:0,
                borderRadius:10
            }}>
            {text}
            </button>
        }
        const MemorizedBtn = React.memo(Btn);
        function App(){    
            const [value, setValue] = React.useState("Save Changes")  
            const changeValue = () => setValue("Revert Changes");
            return( //여기 다는 것들은 모두 props. 여기 밑에 changeValue가 바뀌면
                <div>
                    <MemorizedBtn text={value} changeValue={changeValue} />  
                    <MemorizedBtn text="Continue" />
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM .render(<App />, root);
   </script>
</html>​
  • propTypes : 자료형에 맞지 않는 정보가 오면 error를 띄워줌.

'React > Nomadcoders' 카테고리의 다른 글

Todo-list  (0) 2021.12.02
Clean up function  (0) 2021.12.02
useEffect  (0) 2021.12.02
Minutes to Hours / Km to Miles Converter  (0) 2021.11.25
버튼 count 수 증가시키기  (0) 2021.11.23
'React/Nomadcoders' Related Articles more