몽땅뚝딱 개발자

컴포넌트 단위로 element를 return 할 때 하나의 태그로 전체를 감싸지 않으면 에러가 발생한다. 이 때 태그로 감싸면 태그나 기타 의미없는 구분용 태그(가령 )를 추가하지 않아도 된다. ◽ 태그 사용하기 를 사용하기도 한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component, Fragment } from "react"; class ChildComp extends Component { render() { return ( P TAG ) } } export ..

함수형 컴포넌트는 class형 컴포넌트와 달리 아래와 같은 특징이 있다. 1. state가 없다. 2. 생명주기 함수를 사용할 수 없으며 hook을 이용한다. 3. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용한다. 4. render() 함수가 없으므로 return을 사용하여 화면을 그려준다. ◽ 함수형 컴포넌트 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React from "react"; function ChildComp(props) { let { co..

◽ Class형 컴포넌트 Class형 컴포넌트에는 Component외 PureComponent가 있다. ◽ 차이점 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. 1. Component 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다. setState() 함수로 실행된 값은 이전에 있던 state 변수값과 동일하더라도 컴포넌트에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다. // 1. Component를 import한다. import React, { Component } from "react"; // 2. 상속받는다. class ChildComp extends Component { // 코드 ... } 2..

◽ state 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component } from "react"; class ChildComp extends Component { constructor(props) { super(props); this.state = { stateString: this.props.val_string, stateNumber: 200 } } render() { return ( {this.state.stateString} ); } } export d..