React JS

React JS - 03

yongyongMom 2023. 8. 18. 12:57

SMALL

1. 반복적으로 사용하는 button 만들기

- 반복적으로 사용하는 button 함수 Btn 만들기.

- Btn 함수에 props 를 넘겨줘 Button에 서로 다른 text를 나타낼 수 있음. ex) 'Save Changes', 'Confirm'

<!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">
    const root = document.getElementById("root");

    function Btn (props) {
        return <button style={{
                backgroundColor :"black",
                color : "white",
                size: "5px",
                borderRadius : "10px",
                margin : "10px"
            
            }}>
            {props.text}
            </button>
       }
    function App() {
        // function SaveBtn() {
        //     return(
        //         <button>Save Button</button>
        //     )
        // }
        // function ConfirmBtn () {
        //     return <button>Confirm</button>
        // }
        return(
            <div>
                <Btn text="Save Changes"/>
                <Btn text="Confirm"/>
            </div>
            
        );
    }

    ReactDOM.render(<App />, root);
</script>
</html>

2. 버튼 다시 그리기

- 버튼 클릭 시 버튼 내부의 text 변경을 할 때 바뀌는 버튼 뿐만 아니라 바뀌지 않는 버튼까지 다시 그림

- 이는 페이지 반응이 느려지는 원인이 되기 때문에 변하는 부분만 다시 그리도록 작성

- React.memo 를 이용해 변하지 않는 태그는 기억하고 다시 그리지 않음.

- props 가 변경되는 부분만 다시 그리고 변경되지 않는 부분은 memo 에서 기억해놓은 태그를 그대로 그림.

<!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">
    const root = document.getElementById("root");
        
        // function SaveBtn() {
        //     return(
        //         <button>Save Button</button>
        //     )
        // }
        // function ConfirmBtn () {
        //     return <button>Confirm</button>
        // }
       function Btn (props) {
        console.log(props.text, "was rendered");
        return <button style={{
                backgroundColor :"black",
                color : "white",
                size: "5px",
                borderRadius : "10px",
                margin : "10px"
            
            }}
                onClick={props.onClick}>
            {props.text}
            </button>
       }
       const Memorize = React.memo(Btn);
       function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => {
            setValue("Revert Changes");
        }
        return(
            <div>
                <Memorize text={value} onClick={changeValue}/>
                <Memorize text="Confirm"/>
            </div>
            
        );
    }
    ReactDOM.render(<App />, root);

</script>
</html>

3. propType 을 지정하는 방법

- prop 들도 문자, 숫자 등 특정한 자료형을 받아야 함.

- 그런데 적절하지 않은 자료형이 입력되더라도 문제가 발생하지 않고 페이지가 로드되는 경우를 방지하고자 prop 타입을 지정함.

- [ 태그이름.propTypes = { prop 이름 : PropTypes.자료형, } ] 형태로 사용함. memo 와 같이 사용되지 않음... 왜?

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div> 
    </body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.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 src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script type="text/babel">
    const root = document.getElementById("root");
        
        // function SaveBtn() {
        //     return(
        //         <button>Save Button</button>
        //     )
        // }
        // function ConfirmBtn () {
        //     return <button>Confirm</button>
        // }
       function Btn (props) {
        
        console.log(props.text, "was rendered");
        return <button style={{
                backgroundColor :"tomato",
                color : "white",
                border : "solid blue 5px",
                borderRadius : 10,
                margin : 10,
                fontSize: props.font
            }}
                onClick={props.onClick}>
            {props.text}
            </button>
       }
    //    const Memorize = React.memo(Btn);
       Btn.propTypes = {
        text : PropTypes.string,
        font : PropTypes.number.isReaquired,
       }
       // propTypes, PropTypes 대소문자 구분이 중요함
       function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => {
            setValue("Revert Changes");
        }
        return(
            <div>
                <Btn text={10} onClick={changeValue} font={30}/>
                <Btn text={"Confirm"} />
            </div>
            
        );
    }
    ReactDOM.render(<App />, root);

</script>
</html>

이상으로 기본적인 prop 을 이용하여 반복되는 태그를 효율적으로 사용하는 방법에 대해 정리하였다.

이후부터는 react 프로젝트를 생성하여 component를 나누고 보다 다양한 기능을 만들어 보겠다.

화이띵~

( 영상이나 사진이 코드의 결과라고 보면 된다. )

LIST