#4~#6(Props~useEffect)

• react에서 inline css styling하기 

• 사용자 정의 컴포넌트 Btn에 있는 onClick은 event handler가 아닌, props에 넘겨주는 프로퍼티 값에 해당한다. 따라서, 해당 컴포넌트 함수에서 구조 분해 할당을 통해 꺼내와서 사용할 수 있다! (html element에 입력하는 것은 event handler임)

• 실제 html 태그에 입력해줘야 적용이 되는거지, 사용자 정의 컴포넌트에 입력하는 것은 아무 소용이 없음!

 

React Memo:

• text="Continue"에 해당 하는 props는 상태 변경이 발생하지 않기 때문에 props의 변동이 발생하지 않는다 => 하지만, 첫 번째 Btn과 같은 컴포넌트를 공유하기 때문에 첫 번째 props의 상태 변경이 발생하면 동시적으로 리렌더링되게 된다 => 이것을 방지할 수 있는 것이 React Memo라고 한다 Props가 변경되지 않는 것은 렌더링이 발생하지 않도록 할 수 있음! 

• React.memo(Btn(제어하고자 하는 컴포넌트 입력))

React memo의 유용성: 

• 만약 부모 컴포넌트가 변경되면 자식 컴포넌트들까지 전체 리렌더링된다 => 이럴 경우 애플리케이션 성능 저하가 발생할 수 있음 이러한 불상사를 방지하기 위해 React memo는 매우 유용할 수 있음! 

 

 props types: 사용하는 props의 타입을 체크할 수 있다 (강의에서는 CDN 방법으로 가져옴)

• propsType에 접근을 할 수 있어야 한다 

• 위와 같이 컴포넌트 형식으로 지정을 해서 사용할 수 있다 

• 위에 지정한 것처럼 입력을 하지 않을 경우 리액트에서 warning을 준다! => googling하면 관련 자료를 얻을 수 있음!  

• isRequire을 작성하면, 무조건 추가를 해줘야 한다! (node.js 환경에서는 npm i proptypes를 하면 됨! 

---

React에서 css의 모듈화:

위처럼 css를 작성했을 때 App 컴포넌트에 import을 해서 사용할 수 있음, 다른 방식으로 inline 형식으로 style을 지정해줄 수도 있음 => 하지만 두 가지 방법 모두 매우 비효율적이다

CRA에서는 css도 모듈처럼 활용할 수 있게 해준다 

• 위와 같이 import을 통해 마치 객체의 프로퍼티처럼 className에 css 상태를 줄 수 있다.

• className은 임의의 이름을 자동적으로 할당하게 된다.

CRA의 핵심적인 역할은 각각의 컴포넌트를 독립적을 관리할 수 있도록 한 것이다!

 

---

useEffect:

• react의 특징은 state가 변동되면, App 컴포넌트 전체가 re-render됨 => 하지만, 어떤 경우에는 처음 component가 불러올 때만 렌더링되기를 원하기도 함 => 그럴 때 사용하는 것이 useEffect이다 
• state가 변경되면 컴포넌트 전체가 리렌더링된다

• 만약에 저 console.log("call an api")가 실제로 api를 불러오는 코드면 렌더링될 때마다 API를 호출하게 될 것!

• useEffect에서 return을 사용해서 clean up을 할 수 있다!