[ReactJS] Props, 커스텀 컴포넌트, React.memo()

props 에 뭘 또 넣어줄 수 있을지 볼거다.

 

여기 Btn에 들어가는 onClick은 버튼 컴포넌트에 들어가는 Props 이다. 실제 이벤트리스너가 아니라 말이다.

 

 

onClick을 return 하는 JSX의 HTML 안에 넣는다면 그건 이벤트리스너를 넣어주는 게 되겠지만

 

커스텀 컴포넌트에 onClick를 넣어주는 것은 이벤트 리스너가 아니다. 이건 단지 하나의 Prop인거지. 

마찬가지로 단순히 커스텀 컴포넌트 안에 적어준 Props 이기 때문에 style 같은 걸 적어줘도 전혀 작동하지 않는다.

아래와 같이 해줘야된다. 커스텀 컴포넌트 안에 들어가는 건 단순히 Prop가 될 뿐이다. 이것들은 결코 실제 HTML 태그 안에 들어가지 않는다.

state 를 만들면 modifier 함수가 생성된다.

modifier 함수는 바로 state 어떤 값을 할당하고 reRender 를 하기 때문에

이거를 또다른 함수에 넣어줘서 컨트롤 해준다.

 

(setValue를 그냥 바로 onClick에 넣어줄수는 없나?)

 

prop를 버튼 태그의 onClick 이벤트 리스너로서 활용하고 있으니깐.

 

커스텀 컴포넌트 안에 하나 이상의 태그가 들어가 있을 수 있고 그렇기에 어디에 넣어줘야 할 지 모르기에 ReactJS 가 어떤 결정도 하지 않는거다.

 

ReactJS 에서는 최적화를 많이 제공하는데 아래와 같이 변화가 없는데 반복되는 것을 최적화 할 수 있다.

 

컴포넌트가 state를 바꾸면 다시 render한다는 것을 알고 있다. 

 

부모 컴포넌트가 App 이 state를 변화 시키고 있고 두개의 버튼 컴포넌트가 모두 리랜더링 된다.

 

React Memo 라는 걸 활용해 볼 수 있다.

이 컴포넌트를 다시 리랜더링하고 싶지 않다. props 가 변경되지 않는다고 하면.

결국 우리는 이 컴포넌트를 다시 그릴지 말지 결정을 할 수 있다.

 

리액트 메모.

* 항상 파스칼 케이스로 적어주어야 함. 첫글자 대문자.

React.memo()

버튼을 클릭하면, 이벤트리스너에 따라 changeValue가 실행이 되어야 하고 changeValue는 state를 변화 시키기 때문에 다시 re-render를 발생시켜야 한다. 

 

만약 부모가(App) 어떠한 state의 변화라도 있다?

모든 자식들(Btn Btn) 은 다시 그려질 것이다.

그리고 이게 추후에 Application 이 느려지는 원인을 제공할지도 모른다.