일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 리액트
- react
- TSDoc
- 제네릭
- NonNullable
- 반복줄이기
- 폰트적용하기
- 티스토리꾸미기
- React.js
- 타입선언
- 타입좁히기
- utilty type
- reactjs
- returnType
- click and drag
- 개발콘텐츠
- 레이아웃쪼개기
- 커스텀
- 누구나 자료구조와 알고리즘
- JS console
- const 단언문
- vue.js
- 성능최적화
- javascript
- CSS
- Chart.js
- typescript
- 2022
- 타입스크립트
- 공통컴포넌트
- Today
- Total
목록Development/React.js · Next.js (37)
몽땅뚝딱 개발자
간단한 페이지를 하나 구현해보려고 한 것 뿐인데 장벽이 많았다. 주로 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 해온 이름.클래스 이름}"을 넣..
컴포넌트가 중첩되어있을 경우, 자식에서 자식으로 props를 사용하여 계속 넘겨야 하기 때문에 데이터 공유가 힘들다. 이 때 Context API를 사용할 수 있다. ◽ Context API 사용하기 1. 변수를 선언한다. import {createContext} from "react"; let TestContext = createContext() // 다른 컴포넌트와 공유할 경우 export를 붙여준다. // export let Context = createContext() 2. 아래와 같이 공유할 컴포넌트를 감싸준다. // 공유할 변수는 여러개 작성할 수 있다. 3. 공유할 컴포넌트를 import 한다. import {TestContext} from "../App"; function Detail(pr..
◽ 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..