FrontEnd/React.js26 Fragments 사용하기 Fragments 사용하기 컴포넌트 단위로 element를 return할 때 하나의 태그로 전체를 감싸지 않으면 에러가 발생한다. 이때 태그로 감싸면 불필요한 태그를 추가하지 않고 사용할 수 있다. element 변환 시 하나의 태그로 감싸지 않으면 다음과 같은 에러 메시지가 표시된다. Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you wnat a JSX fragment …? 예제코드 App.js import React from 'react'; import './App.css'; import Fragments from './R032_Fragments.js'; function App() { return ( St.. 2022. 6. 30. hook사용하기 hook사용하기 함수형 컴포넌트에서 클래스형 컴포넌트와 같이 state와 생명주기 함수와 같은 기능을 사용하기 위해 hook을 이용한다. 대표적인 hook함수에는 useState()와 useEffect()가 있다. 예제코드 App.js import React from 'react'; import './App.css'; import ReactHook from './R031_ReactHook.js'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R031_ReactHook.js import React, {useState, useEffect } from 'react'; function R031_ReactHook(prop.. 2022. 6. 29. 함수형 컴포넌트 사용하기 함수형 컴포넌트 사용하기 함수형 컴포넌트는 클래스형 컴포넌트와 달리, 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. shallow-equal 사용하기(class형 컴포넌트) shallow-equal 사용하기 shallow-equal 패키지는 PureComponent에서 state 값의 변경을 비교하는 것과 동일한 기능을 하는 함수를 제공한다. shallowEqualArrays() 함수를 사용하면 문자열과 배열은 값만 비교한다. 객체는 PureComponent와 동일하게 참조 값을 비교한다. 명령 프롬프트를 연 후 설치경로로 이동하고, npm install shallow-equal 명령어로 shallow-equal 패키지를 설치한다. 예제코드 App.js import React from 'react'; import './App.css'; import Shallowequal from './R029_ShallowEqual.js'; function App() { return ( S.. 2022. 6. 27. 이전 1 2 3 4 ··· 7 다음
