Props / Memo / Prop Types

먼저 두 개의 버튼을 만들어 보자.

function SaveBtn() {

return <button>Save</button>;

}

function ConfirmBtn() {

return <button>Confirm</button>;

}

function App() {

return (

<div>

</div>

)

}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

위와 같은 상황에서 만약 버튼에 같은 style을 추가하고 싶다면 복사 붙여넣기로 각각 추가해줘야 할 것이다.

그런데 각각 style을 추가해주는 대신 같은 설정들을 넘겨줄 수 있는 컴포넌트를 한 개만 만들어 재사용한다면 훨씬 효율적일 것이다.

다음과 같이 바꿔보자.

function Btn({text, big}) {

return <button style={{

background: "tomato", color: "white", padding: "10px, 20px", border: 0, borderRadius: 10, fontSize: big ? 18 : 16 }}>

{text} </button>;

}

function App() {

return (

<div>

</div>

)

}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

1. Props

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

함수 Btn에 원하는 스타일을 적용시켜 놓고 App에서 Btn을 호출하여 text와 big을 넣는 것이다.

Btn 함수는 다양한 argument를 받으며 argument의 이름은 마음대로 지을 수 있다.

이러한 다양한 argument를 property 또는 props라고 부른다.

즉, 컴포넌트에 보내지는 argument인 것이다.

리액트가 하는 작업은 Btn함수를 호출하여 props들을 첫 번째 인자로 넣는 것이다.

그런데 App 안에서 불러온 Btn에 prop을 추가하는 것은 이벤트 리스너가 아니며 그냥 Btn 함수에 들어가는 prop일 뿐이다.

이벤트 리스너는 Btn 함수 자체에 넣어줘야 한다.

function Btn({text, onClick}) {

return <button onClick={onClick} style={{

background: "tomato", color: "white", padding: "10px 20px", border: 0, borderRadius: 10}}>

{text} </button>;

}

function App() {

const [value, setValue] = React.useState("Save");

const changeValue = () => setValue("revert changes");

return (

<div>

</div>

)

}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

위와 같이 App 안 Btn에서의 onClick은 그냥 prop의 이름일 뿐이며 이를 Btn 함수가 인자로 받아 onclick 이벤트 리스너로 실행시켜주는 것이다.

만약 Btn 함수 안에서 onclick 이벤트 리스너가 없고 App 안 Btn에만 onclick이 있다면 이는 적용되지 않을 것이다.

그저 prop이기 때문이다.

2. Memo

그런데 버튼을 클릭하면 value가 바뀌고 re-render가 되는데 변화가 없었던 confirm 버튼도 같이 re-render가 된다.

부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트도 re-render가 일어나기 때문이다.

그런데 이는 어플리케이션이 느려지는 원인이 될 수 있다.

prop가 변경되지 않아서 불필요한 re-render가 없길 원하는 컴포넌트가 있다면 React Memo를 사용해보자.

https://ko.reactjs.org/docs/react-api.html#reactmemo

React 최상위 API – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

위와 같은 코드에서는 save changes 버튼을 눌러도 옆에 있는 confirm 버튼은 re-render가 되지 않는다.

prop가 변경되지 않는다면, 즉 state가 변경되지 않았다면 re-render하지 않도록 하여 불필요한 re-render가 일어나는 것을 막을 수 있다.

3. Prop Types

만약 각 props에 특정 타입이 입력되길 원하다면 proptype을 설치하여 사용해보자.

위의 코드는 text에는 string, fontSize에는 number가 들어와야 함을 정해주는 것이다.

다른 타입이 들어가면 에러는 안나지만 콘솔창에서 경고가 뜨는 것을 확인할 수 있다.

만약 뒤에 .isRequired를 붙인다면 해당 prop는 반드시 가지고 있어야 함을 의미하며 해당 prop이 빠져있다면 경고창이 뜨는 것을 확인할 수 있다.

다음과 같이 두번째 버튼에는 fontSize prop이 없으므로 Btn에서 정의한 fontSize인 16이 적용된다.