FrontEnd30 Props 객체형으로 사용하기 Props 객체형으로 사용하기 props 값을 객체로 하위 컴포넌트에 전달할 경우, 자료형을 object로 선언한다. 하지만 객체 형태(객체 내부 변수들)의 자료형을 선언할 때는 shape이라는 유형을 사용한다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsObjVal from './R020_PropsObjVal.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R020_PropsObjVal.js import React, {Component} from "react"; import datatye from 'prop-types'; .. 2022. 6. 27. Props Boolean으로 사용하기 Props Boolean으로 사용하기 props 값을 Boolean형으로 하위 컴포넌트에 전달할 경우, true나 false 중 하나를 할당한다. 추가 문법으로 props 변수를 선언한 후 값을 할당하지 않고 넘기면 true가 기본값으로 할당된다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsBoolean from './R019_PropsBoolean'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R019_PropsBoolean.js import React, {Component} from "react"; class R019_Pro.. 2022. 6. 27. Props 자료형 선언하기 Props 자료형 선언하기 자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교한다. 이 때, 자료형이 일치하지 않는다면, 경고 메시지로 알려주기 때문에 잘못된 데이터를 확인할 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsDatatype from './R018_PropsDatatype'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R018_PropsDatatype.js import React, {Component} from "react"; import .. 2022. 6. 27. Props 사용하기 Props 사용하기 props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다. 예제 코드 App.js import React from 'react'; import './App.css'; import Props from './R017_Props'; function App() { return ( Start React 200! css 적용하기 ); } export default App; 코드해설 Line3 임포트한 하위 컴포넌트 R017_Props에 전달할 props 변수(props_val)에 값(THIS SI PROPS)을 저장한다. R.. 2022. 6. 27. 이전 1 2 3 4 5 6 7 8 다음
