[React] 3. Props

본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다.

 

Props

부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 (일종의 인자)

우리의 커스텀 컴포넌트에 HTML의 syntax를 적용시킬 수 있다. -> 데이터를 전달하는 방법

커스텀 컴포넌트를 재사용가능한 컴포넌트로 만들 수 있는 방법!

 

function Btn(props){
        console.log(text + 're render');
        return <button 
        onClick={changeValue}
        style={{
            backgroundColor: "tomato",
            color:"white",
            padding:"10px 20px",
            border : 0,
            borderRadius:10,
            fontSize
        }}>{props.text}</button>
    }



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

 

text값이 props로 전달된다. Btn은 함수니깐! 이런 일이 가능하다. 

단 props는 하나의 객체로써 전달되는 값들을 모두 담고있는 커스텀 컴포넌트의 유일한 인자이다. 

두번째, 세번째 없다.

 

function Btn({ text, changeValue, fontSize = 14 }){
        console.log(text + 're render');
        return <button 
        onClick={changeValue}
        style={{
            backgroundColor: "tomato",
            color:"white",
            padding:"10px 20px",
            border : 0,
            borderRadius:10,
            fontSize
        }}>{text}</button>
    }

 

{}를 써서 이렇게도 표현한다.

boolean, string 심지어 function도 넣을 수 있다.

다만 <Btn text="Helo" onClick={changeValue}/>와 같이 값을 넣은 경우 이는 eventListener가 아닌

그저 "onClick"이라는 이름을 가진 props객체의 속성일 뿐이다.

적는다고 바로 HTML태그로 들어가는 것이 아닌 Btn({onClick})으로 받아서 직접 넣어주어야 설정된다.

 

자식 컴포넌트에서 부모 컴포넌트로 정보를 전달하는 방법은?

부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하는 방법에는 props가 있었다.

그렇다면 자식 컴포넌트에서 부모 컴포넌트로 정보를 전달하는 방법에는 뭐가 있을까?

바로 setState 함수를 이용한 부모 컴포넌트의 상태 변경으로 자식 컴포넌트의 정보를 전달하는 것이다.

예를 들어,

 

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

 

위와 같은 코드가 전체 코드의 일부에 있다고 할 때 첫번째 버튼인 SaveChange 버튼을 누르면 setValue 함수를 콜하면서

value값에 변경이 이루어지고 이는 App 컴포넌트가 사용중인 State이므로 부모 state의 변경이 이루어진다.

이후 부모 컴포넌트인 App 컴포넌트가 리렌더링되며 자식 컴포넌트인 Btn1과 Btn2도 리렌더링된다.

-> 자식이 부모의 상태를 변경할 수 있다

 

React Memo

위와 같은 상황에서 SaveChange 버튼의 경우 RevertChange 버튼으로 바뀌기 때문에 리렌더링 되는게 맞지만

Btn2(<Btn text={14} />)의 경우에는 변하는 값이 없기 때문에 굳이 리렌더링 할 필요가 없다.

그러나 React의 법칙에 의해 상태가 변경되면 리렌더링해야하고 부모 컴포넌트가 리렌더링됨으로써 전부 리렌더링된다.

이를 해결할 수 있는 방법이 있는데 바로 React Memo이다.

props이 변경되지 않는다면 이 컴포넌트를 다시 그리지 않도록 할 수 있다.

 

const MemorizedBtn = React.memo(Btn);

...

<MemorizedBtn text={14} />

 

PropTypes

잘못된 prop을 전달하는 것을 경고.(에러가 아님)

에러를 뱉진 않지만 console을 통해 올바르지 않은 타입이 들어왔다고 알려줄 수 있다.

 

function Btn({text, changeValue, fontSize = 14}){/\
        console.log(text + 're render');
        return <button 
        onClick={changeValue}
        style={{
            ...
        }}>{text}</button>
    }

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