ReactJS로 영화 웹 서비스 만들기/Props (3) 썸네일형 리스트형 Prop(3) - Prop Types - Prop Types를 왜 이용하는지? : type(string, number..등)을 설정해두면, 코드에 실수가 있었는지를 확인이 가능함. * 사용법 1) 터미널에서 아래와 같이 설치 npm i prop-types 2) PropTypes import 해주기 import PropTypes from "prop-types"; 3) #2 부분처럼 사용 가능, 예를 들어 text가 string이 아니라면, 코드 상으로는 문제가 없지만, 콘솔 창에서는 string이여야 된다고 알림이 떠서, 내가 원하는 방식으로 작성이 되었는지 다시 확인이 가능함! import logo from './logo.svg'; import './App.css'; import React, { useState } from 'react'; .. Props(2) - Memorize * 이벤트리스너로 설정된 onChange (#1)랑 Props에 있는 onChange (#2)랑 이름은 같더라도, 전혀 다름 import logo from './logo.svg'; import './App.css'; import React, { useState } from 'react'; function Btn({ text, onClick}){ console.log(text, "was rendered") return {text} ; } const MemorizedBtn = React.memo(Btn); --- #3 function App(){ const [value, setValue] = React.useState("Save Changes") const ChangeValue = () => setValue.. Props(1) * 왜 props(property: 속성)을 사용할까? - 만약에 버튼(butten)이 여러개 일때, 버튼들의 style값을 한번에 수정하고 싶다면, 하나씩 일일이 변경을 해줘야 되는데, props을 이용하면 공유가 가능해서 하나씩 다 수정하지 않아도 됨! 물론 복붙해서 style을 일일이 넣을 수도 있겠지만, 좋은 방법이 아님. function SaveBtn(){ return Save ; } function ConfirmBtn(){ return Confirm ; } function App(){ return( )} * Btn(props) 설정 후 변화 function Btn(props){ console.log(props) return {props.banana} ---- 이거를 넣어줘서, 아래 사진에 있는.. 이전 1 다음
