React에서 Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매커니즘이다.

 

요소를 만들 때마다 스타일들을 작성해주는 것은 너무 시간이 오래 걸린다.

그 대신 스타일들을 모두 갖는 단 한가지의 컴포넌트를 만들어서 사용할 수 있다.

 

Props

코드 예시

<!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, 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 ="Continue" />
                </div>
            )
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);
    </script>
</html>

내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는데,

이 때 argument의 이름은 마음대로 지어줄 수 있다.

 

리액트가 실제로 하는 작업은 함수(Btn())를 호출해서 우리가 넣어둔 모든 것들을 첫 번째 인자로 넣어주는 것이다.

 

Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등으로 적어준다.

React.memo()

 

props에 function도 보낼 수 있다.(JSX로 html 태그 자체에 이벤트 리스너를 넣는것과는 전혀 다르다!)

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

(prop은 그냥 부모에서 자식으로 데이터를 넘길 때 사용하는 argument의 역할이므로)

 

-> 부모의 상태를 바꾸는 함수를 만들었고, 부모 컴포넌트에서 그 함수를 prop으로 보내면 자식 컴포넌트에서 그 함수가 실행된다.

 

부모 컴포넌트의 state를 변경하면 자식 컴포넌트들도 Re-render가 일어난다.

-> 이 때 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있다.

(아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하자)

 

컴포넌트가 React.memo()로 wrapping 된다면

1. React는 컴포넌트를 렌더링하고 결과를 메모이징한다.

2. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

 

예시 코드

const MemorizedBtn = React.memo(Btn);
        function App(){
            const [value, setValue] = React.useState("Save Changes");
            const changeValue = () => setValue("Revert Changes"); 
            return(
                <div>
                    <MemorizedBtn text={value} changeValue ={changeValue} />
                    <MemorizedBtn text ="Continue" />
                </div>
            )
        }

propTypes()

React는 parameter를 잘못 넘겨도 확인할 수 없다. -> propTypes() 모듈을 사용하자. 

type과 다르게 입력 되었거나 parameter 값을 넣지 않는다면 경고 메시지가 뜬다.

 

function Btn({text, fontSize = 16}) {

// (...) 중략

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

 

위 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의에서 알려준 내용 중 일부를 포함하고 있습니다.

React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다.

(밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.)

https://nomadcoders.co/react-for-beginners

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend' 카테고리의 다른 글

[프론트엔드] 내가 보려고 쓰는 ESlint, Prettier 세팅  (0) 2023.12.16
[React] useEffect()에 대해서  (1) 2023.08.17
[React] useState()에 대해서  (0) 2023.08.17
[React] createElement, ReactDOM, JSX에 대해서  (0) 2023.08.17
[React] npx create-react-app이 잘 실행되지 않는다면?(NPM 레지스트리 URL 에러)  (0) 2023.08.11

티스토리툴바