FrontEnd30 State 사용하기 State 사용하기 Props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다. 예제코드 App.js import React from 'react'; import './App.css'; import ReactState from './R024_ReactState.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R024_ReactState.js import React, {Component} from 'react'; class R024_ReactState extends Component{ constructor (props){ super.. 2022. 6. 27. Props의 자식 Component에 node 전달하기 Props의 자식 Component에 node 전달하기 props를 하위 컴포넌트 태그 안쪽에 선언해 전달하는 것 이외에도 하위 컴포넌트 태그 사이에 작성된 node를 전달할 수 있다. node란, html 문서를 구성하는 포괄적인 개념이다. 노드의 종류에는 문서 요소, 속성, 텍스트, 주석 등이 있다. 예를 들면, bc에서 태그가 요소, id가 속성, bc가 텍스트이다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsNode from './R023_PropsNode.js'; function App() { return ( Start React 200! css 적용하기 node from App.js ); } export def.. 2022. 6. 27. Props를 기본값으로 정의하기 Props를 기본값으로 정의하기 props의 기본값은 부모 컴포넌트에서 값이 넘어 오지 않았을 때 사용한다. defaultProps라는 문법을 사용한다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsDefault from './R022_PropsDefault.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R022_PropsDefault.js import React, {Component} from "react"; class R022_PropsDefault extends Component { render(){ let { Reac.. 2022. 6. 27. Props를 필수 값으로 사용하기 Props를 필수 값으로 사용하기 props의 자료형을 선언할 때 prop-types를 사용한다. 자료형 설정 대신 isRequired를 조건으로 추가하면, 변수값이 없는 경우 경고 메시지가 발생할 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import PropsRequired from './R021_PropsRequired.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R021_PropsRequired.js import React, {Component} from 'react'; import datatype from 'prop-typ.. 2022. 6. 27. 이전 1 2 3 4 5 6 7 8 다음
