리엑트10 함수형 컴포넌트 사용하기 함수형 컴포넌트 사용하기 함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하고 render() 함수가 없으므로 return만 사용해 화면을 그려준다. 예제코드 App.js import React from 'react'; import './App.css'; import FunctionComonent from './R030_FunctionComponent.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R030_FunctionComponent.js import React from "react";.. 2022. 6. 28. state를 직접 변경한 후 forceUpdate() 함수 사용하기 state를 직접 변경한 후 forceUpdate() 함수 사용하기 this.state.변수명 = value와 같이 직접 state를 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 된다. 이때 forceUpdate() 함수로 화면을 새로 고침하면, render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import ForceUpdate from './R026_ForceUpdate.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R026.. 2022. 6. 27. setState() 함수 사용하기 setState() 함수 사용하기 this.state.변수명=value와 같이 state를 직접 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 된다. setState() 함수로 state를 변경해야 render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import SetState from './R025_SetState.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R025_SetState.js import React, {Compon.. 2022. 6. 27. 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. 이전 1 2 3 다음
