[넷플] React 2. Props

 1. props로 재사용 가능한 함수 만들기

버튼 여러 개를 만들 때, 복붙해서 여러 개를 만드는 것보다

하나의 컴포넌트를 설정해두고 내부 속성(props) 몇 가지만 바꿔가면서(configurable) 재사용할 수 있으면 훨씬 깔끔하지 않을까?

-> 그러면 바꾸고 싶은 속성값을 어떻게 전달할 수 있을까?

1. 사용하고싶은 컴포넌트(함수)를 만든다. 여기서는 Btn()
2. App()에 컴포넌트(함수)를 삽입하고, 해당 컴포넌트에 전달하고 싶은 속성(key : value)을 적는다.
   • <Btn banana="Save Changes" /> 라고 적는 것은 Btn({banana:"Save Changes"})와 같은 뜻.
   • 이 때 속성 이름은 아무거나 적어도 상관 없음. 변수처럼 사용할 것임.
   • 속성값으로는 함수도 들어갈 수 있음
3. 컴포넌트 Btn()의 괄호 안에 인자로 속성(props)을 받을 자리를 만든다.
   • 컴포넌트는 인자로 유일무이하게 속성만 받음. 
   • props의 이름도 꼭 props일 필요 없음. 그냥 객체에 어떤 이름을 주는 것 뿐. potatos = {banana:Continue} 여도 무방.
4. 전달된 prop을 필요한 곳에 값으로 준다.
   • {banana:Continue}라는 배열이 전달됐으니 potatos.banana로 불러올 수 있음.
   • 그러나 객체 이름 언급 없이, 중괄호 열고 key 값 바로 넣는 shortcut이 더 자주 쓰임. {banana}. props 자리, 값 자리 모두 마찬가지.

• 주의 : <Btn style="color:green" onClick="popup()" /> 이렇게 단다고 해서 style이 바뀌거나 onclick 이벤트가 달리는 게 아님. 저기 적는 것들은 props에 인자로 들어가는 객체일 뿐, 실질적으로 동작하기 위해서는 prop를 받아서 컴포넌트 return문 안에 직접 적용시켜야 함.

2. prop types

어떤 타입의 prop을 받고 있는지 체크하는 패키지.

 

어떤 컴포넌트의 속성값이 반드시 특정한 type이기를 원한다면 Btn.propTypes 내부에 속성을 정의해서 해결할 수 있음.

key : PropTypes.type 이런 식. 만약 반드시 입력되어야 한다면 PropTypes.type.required 로 설정 가능.

이외에도 다양한 기능 있음.

 

+) react 말고 js 기본 기능에 의해서 Btn({text, fontSIze = 18 })로 적으면 fontsize 안 들어올 시 default로 18을 적용

 

댓글 : 
https://unpkg.com/prop-types@15.7.2/prop-types.js
그리고 propType이 적용 안되시는 분들은
https://unpkg.com/react@17.0.2/umd/react.production.min.js ->
https://unpkg.com/react@17.0.2/umd/react.development.js 로 변경해주세요.

3. memo

App() 안에 있는 state에 변화가 생기면, App()이 rerender된다.

그러면 변화되어야 하는 컴포넌트와, 하나도 변하지 않았지만 얼떨결에 rerender되는 컴포넌트가 생긴다.

-> 변화가 없는 컴포넌트를 다시 render 시키지 않는 방법은?

 

기본 메서드인 React.memo()를 이용하면 변화가 없을 시 rerender시키지 않을 수 있음