몽땅뚝딱 개발자

◽ lazy import 함수형으로 사용한다. // before import Detail from './routes/Detail.js' // after import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Detail.js') ) 이때 함수형으로 선언한 컴포넌트에 지연이 발생할 수 있는데, 로 감싸주면 로딩도 구현할 수 있다. 필요하다면 자체를 감싸도 된다. ◽ memo 컴포넌트가 재랜더링이 되면 안에있는 자식컴포넌트도 함께 재렌더링되어 성능이 저하될 수 있다. 그래서 꼭 필요한 경우, 특정 상황에만 재렌더링 될 수 있도록 하는 것이 memo()이며 props가 변할 때만 재렌..

간단한 페이지를 하나 구현해보려고 한 것 뿐인데 장벽이 많았다. 주로 scope로 주고있는 vue.js만 사용하다보니 리액트는 도대체 css를 어떻게 주는 것인지 알 수가 없었다. 그리고 scss를 어떻게 적용할 것인가에 대한 것도! 찾아본 방법들은 아래와 같다. 1. styled component 2. {모듈명}.module.css 3. css를 전역으로 선언 여기서 나는 2번 방법을 먼저 사용해보기로 했다. 📄 WatchedItem.module.css "{적용할 모듈명}.module.css" 형식으로 작성해준다. modules로 작성하지않도록 주의! .watched__item { color: red; } 📄 WatchedItem.js className에 "{import 해온 이름.클래스 이름}"을 넣..

컴포넌트는 페이지에 장착되기도 하고(mount), 업데이트가 되며(update), 필요없으면 제거(unmount)된다. 라이프사이플을 사용하면 중간중간 간섭하고 실행할 수 있다. ◽ useEffect() 사용하기 useEffect()는 HTML 렌더링 이후에 동작한다. 1. 오래걸리는 반복연산 2. 서버에서 데이터를 가져오는 작업 3. 타이머 등은 useEffect안에서 사용하는 것이 좋다. 예제 1. class 문법을 사용하는 기존 방식 class lifeCycle extends React.Component { componentDidMount() { // ... } componentDidUpdate(prevProps, prevState, snapshot) { // ... } componentWillUn..

◽ 설치하기 npm i react-router-dom@6 ◽ Router 사용하기 📄 index.js 태그로 감싸준다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring ..

1. 리액트는 JSX이기 때문에 'class'가 아니라 'className'을 사용한다. import './App.css'; function App() { return ( // className을 사용한다. ); } export default App; 2. 중괄호({}) 문법을 사용하여 데이터를 바인딩한다. import './App.css'; function App() { let post = '제목' return ( 블로그 // 중괄호 문법을 사용한다. { post } ); } export default App; 3. style은 style={} 문법으로 사용하며, 카멜 케이스이다. import './App.css'; function App() { let post = '제목' return ( // sty..

컴포넌트 단위로 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..