동백 // 노마드 코더 React JS: Props

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

전에 배웠던 것 복습 :

각각의 로직(기능)을 각자 다른 컴포넌트에 적고, 그 자식 컴포넌트들을 Rendering하는 큰 부모 컴포넌트를 가지는 방식을 통해서 분할 & 정복 방법을 사용할 수 있다.

 

Props

 

핵심 : React JS의 Props에 대해 배워본다.

 

 

Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

 

. 어떻게 리액트 컴포넌트를 재사용할 수 있게 만드는가?

 

. 컴포넌트는 단지 어떤 JSX를 반환하는 함수이다.

function ConfirmBtn(){
        return <button>Confirm</button>;
    }

 

. 컴포넌트(함수)들을 호출하는 방법

        return(
            <div>
                {/* 아래와 같은 방식으로 함수들을 불러내고 이걸 바로 함수형 컴포넌트라고 부른다. */}
                <SaveBtn />   
                <ConfirmBtn/>
            </div>
        );

 

. 디자인을 위해 property(속성)을 사용한다.

    function SaveBtn(){
        return <button style={{
            backgroundColor: "tomato",
            color:"white",
            padding:"10px 20px",
            border: 0,
            borderRadius: 10,
        }}>Save Changes</button>;
    }

 

. 만약 위의 object 방식으로 컴포넌트들에게 속성을 주었다면, 불가피하게 디자인, 즉 속성을 바꿔야 한다면 N개의 속성을 다 일일히 바꿔줘야 한다.

 

. 그러므로 속성을 하나의 컴포넌트에 저장후 그 컴포넌트를 rendering하면서, text만 바꿔주는 편리한 방법을 사용한다.

 

1. 먼저 속성 컴포넌트를 만든다.

    function Btn({ props }){
        return <button style={{
            backgroundColor: "tomato",
            color:"white",
            padding:"10px 20px",
            border: 0,
            borderRadius: 10,
        }}>
        {props}
        </button>;
    }

 

2. 그리고 필요한 만큼 속성 컴포넌트를 rendering 한다.

        return(
            <div>
                {/* 아래와 같은 방식으로 함수들을 불러내고 이걸 바로 함수형 컴포넌트라고 부른다. */}
                <Btn />   
                <Btn />
            </div>
        );

 

3. 속성 컴포넌트에서 수정, 추가하고 싶은 부분을 인자로 넘겨주면서 수정, 추가 한다.

        return(
            <div>
                {/* 아래와 같은 방식으로 함수들을 불러내고 이걸 바로 함수형 컴포넌트라고 부른다. */}
                <Btn props="Save"/>   
                <Btn props="Changes"/>
            </div>
        );
    }

 

. 내가 만들고 사용하는 모든 컴포넌트들은 ()괄호 안에 argument(인자)를 받는다. 첫번째 인자의 이름은 마음대로 지어줄 수 있다.

 

만약 아래 코드와 같이 적으면

        
            <div>
                <Btn banana="Save Changes"/>   
            </div>

 

React는 Btn 컴포넌트에 아래와 같이 인자로 전달받을 것이다.

Btn({banana="Save Changes"})

 

즉. React는 자동으로 모든 property(속성)들을 인자로 해당 오브젝트안으로 집어넣어줄 것이다.

이것을 이용해 속성을 하나의 컴포넌트에 저장후 그 컴포넌트를 rendering하면서, 필요한 부분만 바꿔주는 편리한 방법을 사용할 수 있게 된다.

 

 

 

---

 

 

Memo

 

핵심 : React JS의 Props에 인자로 무엇을 더 넣을 수 있는지 알아본다.

 

전에 배웠던 것 복습 :

모든 컴포넌트들은 () 괄호안에 인자를 받고, 그 인자를 통해서 우리는 string, boolean, number등 다양한 property들을 보낼 수 있고, 그에따라 컴포넌트 내부의 내용을 수정할 수 있었다.

 

 

. 만약 부모 컴포넌트가 state(상태)를 변경할 때 자식 컴포넌트들에게는 어떤일이 일어나는지?

 

1. 먼저 컴포넌트에게 props를 주어줌.

        return(
            <div>
                {/* 아래와 같은 방식으로 함수들을 불러내고 이걸 바로 함수형 컴포넌트라고 부른다. */}
                <Btn text={value}
                    onClick={changeValue}
                />   
                <Btn text="Changes"/>
            </div>
        );
    }

. 이때 아래 코드는 이벤트 리스너가 아니라 단지 하나의 prop이며, 인자로 컴포넌트에 넘어갔을 때 비로서 이벤트 리스너가 된다.

즉 props가 이벤트리스너와 완전히 동일한 이름일지라도, JSX에서 속성을 바로 적용시키는 것이 아닌, props를 적고 컴포넌트에 인자로 주어줌으로서 변화가 일어난다.

                    onClick={changeValue}

 

이 말은 컴포넌트 내에서 인자값(value)을 받아줄 속성(key)이 이미 있어야 한다는 말이다.

function Btn({ text, onClick }){
        return <button onClick= {onClick}

 

 

. text나 boolean 타입 말고도 인자로 더 보낼 수 있다.

 

. 리렌더링 조건 {

   1) props이 바뀔 때

   2) state가 modifier에 의해서 바뀔때

   3) 부모 컴포넌트가 리렌더링 될 때

 

 

. React Memo

Memo를 통해 우리는 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트중 일부를 다시 그릴지 말지를 자식 props가 바뀌지않았다는 전제하에 결정해줄수있다.

 

. 즉 아래 코드와 같이 위 Btn은 props가 바뀌지만, 아래 Btn은 props가 바뀌지않는다. 이 경우 Memo를 통해서 아래 Btn이 같이 리렌더링 되는 것을 사이트의 최적화를 위해서 막을 수있다.

        return(
            <div>
                {/* props를 인자로 보낼 때 컴포넌트에 이미 인자값을 받을 매개변수와 Prop이 있어야 함. */}
                <Btn text={value}
                    onClick={changeValue}
                />   
                <Btn text="Changes"/>
            </div>
        );
    }

 

. Btn을 React.memo()를 통해서 일부 리렌더링을 막아주었다. 이는 어플리케이션의 속도가 리렌더링시 느려지는 것을 막기 위함이다.

const Btn1 = React.memo(Btn);

-----------------------------

			<div>
                {/* props를 인자로 보낼 때 컴포넌트에 이미 인자값을 받을 매개변수와 Prop이 있어야 함. */}
                <Btn1 text={value}
                    onClick={changeValue}
                />   
                <Btn1 text="Changes"/>
            </div>

 

. 컴포넌트 내에서 정의되지않은 변수에 관한 기본값을 줄 수있다.

 

. 아래 코드에서 만약 props 중 fontsize가 없다면 즉 아래btn1은 fontsize 기본값으로 설정된 23의 크기를 갖게 된다.

			<div>
                {/* props를 인자로 보낼 때 컴포넌트에 이미 인자값을 받을 매개변수와 Prop이 있어야 함. */}
                <Btn1 text={value}
                    onClick={changeValue}
                    fontSize= {18}
                />   
                <Btn1 text="Changes"/>
            </div>

 function Btn({ text, onClick, fontSize=23 }){
         {/* onClick 매개변수와 onClick, text Prop이 존재함으로 props를 성공적으로 받을 수 있다. */}
        return <button onClick= {onClick}
            style={{
            backgroundColor: "tomato",
            color:"white",
            padding:"10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
        }}>
        {text}
        </button>;
    }

 

 

 

---

 

 

Prop Types

 

핵심 : prop types에 대해서 이야기한다.

 

 

. 우리는 text prop에 string 대신 number형을 보내거나, fontsize에 string을 보내는 실수를 할 수도있다.

리액트는 우리가 prop에 어떤 type을 받고싶어하는지를 잘모른다. 우리는 text prop에 string, fontsize에는 number을 받길 원한다. 

 

. 위 같은 상황을 위해 React는 PropTypes라는 패키지를 만들었다.

 

PropTypes은 네가 어떤 타입의 prop을 받고 있는지를 체크해준다.

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>

 

    Btn.propTypes = {
        // prop 이름과 그 type을 쓰면 됌.
        text: PropTypes.string, 
        fontSize: PropTypes.number, 
    };

 

 

 

 

---

 

 

핵심 요약

1. Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

 

2. 컴포넌트는 단지 어떤 JSX를 반환하는 함수이다.

 

3. 디자인을 위해 property(속성)을 사용한다.

 

4. 속성을 하나의 컴포넌트에 저장후 그 컴포넌트를 rendering하면서, text만 바꿔주는 편리한 방법을 사용한다.

 

5. 내가 만들고 사용하는 모든 컴포넌트들은 ()괄호 안에 argument(인자)를 받는다. 첫번째 인자의 이름은 마음대로 지어줄 수 있다.

 

6. React는 자동으로 모든 property(속성)들을 인자로 해당 오브젝트안으로 집어넣어줄 것이다.

 

7. props가 이벤트리스너와 완전히 동일한 이름일지라도, JSX에서 속성을 바로 적용시키는 것이 아닌, props를 적고 컴포넌트에 인자로 주어줌으로서 변화가 일어난다.

 

8. 컴포넌트 내에서 인자값(value)을 받아줄 속성(key)이 이미 있어야 한다는 말이다.

 

9. Memo를 통해 우리는 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트중 일부를 다시 그릴지 말지를 자식 props가 바뀌지않았다는 전제하에 결정해줄수있다.

 

10. React.memo()를 통해서 일부 리렌더링을 막아줄수있다. 이는 어플리케이션의 속도가 리렌더링시 느려지는 것을 막기 위함이다.

 

11. 컴포넌트 내에서 정의되지않은 변수에 관한 기본값을 줄 수있다.

 

12. PropTypes은 네가 어떤 타입의 prop을 받고 있는지를 체크해준다.