[React] props

* props 전달  부모에서 자식으로 데이터 넘기기

function Btn({onClick}) { // App 컴포넌트에서 onClick이라는 이름의 props를 전달받음 (alert라는 함수)
    return (
      <button onClick={onClick}>버튼</button> // 여기서 button태그의 onClick속성은 이벤트 리스너
    );
}
function App() {
    const alert = () => alert("HI");
    return (
      <div>
        <Btn onClick={alert} /> // onClick은 이벤트 리스너 X, Btn 컴포넌트에 onClick이라는 Props를 전달
      </div>
    );
}
ReactDOM.render(<App />, root);

<Btn onClick={alert}/> 에서 onClick은 이벤트 리스너가 아닌, Btn 컴포넌트에 onClick이라는 함수를 Props로 전달한 것이다. 여기서 onClick은 단순히 props의 이름이다. 

컴포넌트에 onClick 이벤트 리스너를 붙이고 싶다면 해당 컴포넌트의 props로 이벤트 리스너를 전달하고, 그걸 받아오면 해당 컴포넌트의 최상단 엘리먼트에 onClick 이벤트 리스너를 붙이면 된다.

즉, 컴포넌트에는 HTML Element처럼 속성을 지정해줄 수 없다. 

JSX로 데이터를 전달하는 것은 html 태그 자체에 이벤트 리스너를 넣는 것과는 전혀 다른 것이다.

컴포넌트에 그러한 행위를 하는것은 그저 props를 전달해 주는 것 뿐이다.

왜? props는 부모에서 자식으로 데이터를 넘길 때 사용하는 argument의 역할을 하니까

 

* React.memo() 불필요한 리렌더링을 MEMO로 막기 

부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남.

불필요한 렌더링이 발생할 수도 있는데, 많은 자식 컴포넌트가 있는 경우 매번 모든 컴포넌트가 다시 렌더링 되면 느려질 수 있음. 이 경우에는 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음. 

 

아래는 리액트 공식 사이트 memo 설명

---

* React.memo()
컴포넌트가 React.memo()로 wrapping 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

 

const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});

React.memo는 고차 컴포넌트(Higher Order Component)입니다.

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

React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링 됩니다.

 

---

[노마드코더 ReactJS로 영화 웹서비스 만들기] 

[목표: 5월 10일까지 끝내기]

#1 [2021 UPDATE] INTRODUCTION     22.05.02

#2 [2021 UPDATE] THE BASICS OF REACT     22.05.03

#3 [2021 UPDATE] STATE     22.05.05

#4 [2021 UPDATE] PROPS    22.05.05

#5 [2021 UPDATE] CREATE REACT APP

#6 [2021 UPDATE] EFFECTS

#7 [2021 UPDATE] PRACTICE MOVIE APP

 

 

 

See the Pen Untitled by JeongbinYoon (@jeongbinyoon) on CodePen.