오늘도 코딩하나

[React] ReactJS로 영화 웹 서비스 만들기_(4) 본문

React/노마드코더

[React] ReactJS로 영화 웹 서비스 만들기_(4)

오늘도 코딩하나 2025. 1. 1. 23:18
강의 내용 요약
#4.0 ~ #4.4

 

○ props

   ※ props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
      첫번째이자 유일한 인자

      부모 컴포넌트에서 전달받은 Object

   ※ component : 어떤 JSX를 반환하는 함수

 

   (1) props로 받는 경우

<!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.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/babel">
    const root = document.getElementById('root');
    function Btn(props) {
        return (
            <button
                style={{
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    border: 0,
                    borderRadius: 10,
                    fontSize: props.big ? 18 : 16
                }}
            >
                {props.text}
            </button>
        )
    }
    function App() {
        return (
            <div>
                <Btn text="Save Changes" big={true} />
                <Btn text="Confirm" big={false} />
            </div>
        )
    };
    ReactDOM.render(<App />, root);
</script>

</html>

   props로 변수를 받아서 그 안에서 props.big 이런 식으로 사용한다.

 

   (2) shortcut (보통 이렇게 사용한다)

function Btn({ text, big }) {
        return (
            <button
                style={{
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    border: 0,
                    borderRadius: 10,
                    fontSize: big ? 18 : 16
                }}
            >
                {text}
            </button>
        )
    }
    function App() {
        return (
            <div>
                <Btn text="Save Changes" big={true} />
                <Btn text="Confirm" big={false} />
            </div>
        )
    };

   각각의 인자에 대해 변수명으로 받음으로써 컴포넌트 안에서 props.무슨변수 이런거 안해도됨!

 

   - 컴포넌트간 이벤트 처리

function Btn({ text, onClick }) {
        console.log(text, "was rendered")
        return (
            <button
                onClick={onClick}
                style={{
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    border: 0,
                    borderRadius: 10,
                }}
            >
                {text}
            </button>
        )
    }
    function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => setValue("Revert Changes");
        return (
            <div>
                <Btn text={value} onClick={changeValue} />
                <Btn text="Confirm" />
            </div>
        )
    };
  • App 컴포넌트 내에 Btn 인자에서 onClick은 이벤트리스너가 아닌 props!
  • App 컴포넌트의 상태를 바꾸는 함수(value)를 만들었고,
    App 컴포넌트 함수를 실행하는데(changeValue)
    그건 Btn 컴포넌트에서 실행시키는 구조

   - memo()

const MemorizedBtn = React.memo(Btn);
    function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => setValue("Revert Changes");
        return (
            <div>
                <MemorizedBtn text={value} fontSize={18} onClick={changeValue} />
                <MemorizedBtn text={"font"} />
            </div>
        )
    };
  • props 변경이 없는 Confirm 버튼도 re-render됨
  • props 변경이 없다면 re-render을 멈춰주세요~~ 해야하는데
    그때 사용하는 것이 memo();
  • 만약 부모 컴포넌트에서 어떤 state 변경이 있는경우 모든 자식 컴포넌트들은 re-render됨
    자식 컴포넌트가 많을수록 추후에 어플리케이션이 느려지는 원인이 될 수도 있어

 

○ PropTypes

   ※ PropTypes : 어떤 타입의 prop를 받고 있는지를 체크해준다.

Btn.propTypes = {
    text: PropTypes.string.isRequired,
    fontSize: PropTypes.number
}
function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
        <div>
            <Btn text={value} fontSize={18} />
            <Btn fontSize={"fontSize"} />
        </div>
    )
};
  • text: PropTypes.string.isRequired
    → string타입이면서 필수값이다.
  • fontSize: PropTypes.number
    → number타입이면서 필수값은 아니다.

   ▶ 실행결과

function Btn({ text, fontSize = 14})

'React > 노마드코더' 카테고리의 다른 글

[React] ReactJS로 영화 웹 서비스 만들기_(6)  (1) 2025.01.03
[React] ReactJS로 영화 웹 서비스 만들기_(5)  (0) 2025.01.02
[React] ReactJS로 영화 웹 서비스 만들기_(3)  (1) 2024.12.30
[React] ReactJS로 영화 웹 서비스 만들기_(2)  (0) 2024.12.29
[React] ReactJS로 영화 웹 서비스 만들기_(1)  (0) 2024.12.28
'React/노마드코더' Related Articles more