티스토리 뷰

개발/React

Day 5 - ReactJS

zpqmdh 2022. 12. 26. 21:27

props: parent component가 child component 에 데이터를 보낼 수 있게 해주는 방법

component: JSX를 return 하는 함수

 

* Component를 재사용하는 법을 모르기 때문에 먼저, 각각의 버튼마다 component를 생성함

<!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 SaveBtn() {
            return (
                <button
                    style={{
                        backgroundColor: "tomato",
                        color: "white",
                        padding: "10px 20px",
                        borderRadius: 10,
                        border: 0,
                    }}
                >
                    Save Changes
                </button>
            );
        }
        function ConfirmBtn() {
            return (
                <button
                    style={{
                        backgroundColor: "tomato",
                        color: "white",
                        padding: "10px 20px",
                        borderRadius: 10,
                        border: 0,
                    }}
                >
                    Confirm
                </button>
            );
        }
        function App() {
            return (
                <div>
                    <SaveBtn />
                    <ConfirmBtn />
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>
</html>

두 개의 버튼의 스타일을 같게 하기 위해서 style을 복사+붙여넣기하여 사용함 -> 비효율적

따라서 이 설정을 넘겨줄 수 있는 button component가 있다면 좋겠다!

=> 이 style을 모두 갖는 단 한 가지의 component있다면 이를 재사용하여 효율적으로 버튼을 만들 수 있음

 

<Btn text="Save Changes" />
Btn({text:"Save Changes"})

Btn 함수에 인자를 넘겨주는 것! 따라서 Btn 함수의 첫 번째 인자 속으로 Save Changes가 들어감

console.log를 활용하여 출력해보면 Object를 반환하는 것을 확인할 수 있음

<!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}) {
            return (
                <button
                    style={{
                        backgroundColor: "tomato",
                        color: "white",
                        padding: "10px 20px",
                        borderRadius: 10,
                        border: 0,
                    }}
                >
                    {text}
                </button>
            );
        }

        function App() {
            return (
                <div>
                    <Btn text="Save Changes" />
                    <Btn text="Confirm" />
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>
</html>

코드가 유지보수가 쉬워지고 간결해짐.

 

props에 function도 전달할 수 있음

이것은 JSX로 html tag에 event listener를 넣는 것과는 완전 다름!

그저 이벤트를 실행시키는 함수가 property로 들어간 것.

 

prop에 뭘 넣는다고 자동적으로 return 안에 들어가지 않음

함수 인자에서 값을 가져와서 적절하게 사용해야 함

 

parent component의 state가 바뀌게 되면 parent component이 새로 render 된다.

=> 성능 저하

만약 props가 변경되지 않는다면 다시 render되지 않도록 관리할 수 있음

=> React.memo 사용하여 prop의 변경이 일어난 부분만 rendering 시킬 수 있음

 

* React.memo() : React는 component를 rendering하고 결과를 memoizing한다. 그 다음 rendering이 일어날 때 props가 같다면 memoizing된 내용을 재사용함

Btn.propTyes = {
	text: PropTypes.string.isRequired,
	fontSize: PropTypes.number,
};

property type check 가능

<!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/prop-types@15.7.2/prop-types.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        function Btn({ text, fontSize = 16 }) {
            return (
                <button
                    style={{
                        backgroundColor: "tomato",
                        color: "white",
                        padding: "10px 20px",
                        borderRadius: 10,
                        border: 0,
                        fontSize,
                    }}
                >
                    {text}
                </button>
            );
        }
        Btn.propTyes = {
            text: PropTypes.string.isRequired,
            fontSize: PropTypes.number,
        };
        function App() {
            return (
                <div>
                    <Btn text={"Save Changes"} fontsize={18} />
                    <Btn text={"Confirm"} />
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>
</html>

fontSize 를 지정하지 않은 Confirm Button은 Btn 함수의 인자에서 fontSize를 16으로 정의해준다.

isRequired인 text property는 필수로 있어야 함

 

저작자표시

'개발 > React' 카테고리의 다른 글

Day 7 - ReactJS  (1) 2022.12.28
Day 6 - ReactJS  (0) 2022.12.27
Day 4 - ReactJS  (0) 2022.12.25
Day 3 - ReactJS  (2) 2022.12.23
Day 2 - ReactJS  (0) 2022.12.22
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함