몽땅뚝딱 개발자

◽ axios 사용하기 axios는 JSON을 object/array로 변환하는 작업을 자동으로 해준다. axios를 사용하지 않는다면 기본 자바스크립트 문법인 fetch()를 사용하면 되는데 이 경우는 직접 변환해주어야한다. axios.get('URL') .then((res) => { let resArr = [...itemArr, ...res.data] setItem(resArr) }) ◽ props 문법 간결하게 사용하기 [전] function TabContent(props) { return 내용{props.tabIndex} } [후] function TabContent({tabIndex}) { return 내용{tabIndex} } ◽ automatic batching 기능 리액트 18부터 나온 기..

컴포넌트는 페이지에 장착되기도 하고(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 styled-components ◽ import 하기 import styled from "styled-components"; ◽ 사용하기 예제 1. 버튼 만들어보기 let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` function Detail(props) { return ( 버튼 ) } 예제 2. props로 속성 넘겨받기 let YellowBtn = styled.button` background: ${ props => props.bg }; color: black; padding: 10px; ` function Detail(props) { return ( 버튼 ) } 예제 3. 기존 스..

◽ 설치하기 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 ..

◽ 커링(Currying)이란? 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야하는데, 이 함수를 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다. ◽ 예제 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 { tryPlus(a) { // 200을 항상 고정값으로 보내주기..

render() { return ; } https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev

◽ 설치하기 npm install react-bootstrap bootstrap ◽ 예제 import 'bootstrap/dist/css/bootstrap.min.css'; import { Button, Navbar, Nav, Container } from "react-bootstrap"; import './App.css'; function App() { return ( Navbar Home Features Pricing ); } export default App; 출처 React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io

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..