Frontend/React (35) 썸네일형 리스트형 Context API 사용법 데이터를 전역에서 관리해주는 ContextAPI 훅을 사용하는법이다. state와 props를 활용해 데이터를 이동시키는 부분은 생략하였다. 1. 데이터 state관리 1-1. App컴포넌트 밖에 createContext() 만들기 자바스크립트 파일 여기저기에서 사용하려면 export를 맨 앞에 붙여서 context를 생성한다. export const DataStateContext = React.createContext() 1-2. App 컴포넌트안에 context를 불러온다. useState를 활용하여 data를 저장한뒤에 context태그 안에 value안에도 넣는다. function App() { const [data, setData] = useState() //대충 data를 가져오는 API를 호.. React jsx안에서 `${}`쓰고싶을때 jsx내 일반방법 Go Klaytnscope jsx내 삼항연산자 target="_blank" Context API _context undefined 에러 store/user.js import React, { createContext } from "react"; export const userContext = createContext(); //useContext() export default function UserStore(props) { let userObj = { name: "mike", job: "developer" }; return ( {props.children} ); } export안해줘서 그랬음.. 사용방법 1. app.js에서 감싸주기 import "./styles.css"; import UserStore from "./store/user"; import Test from "./Test"; export default function App(.. React option import { useState } from "react"; import "./styles.css"; export default function App() { const selectList = ["select", "sample1", "sample2"]; const [options, setOptions] = useState([]); const onChange = (e) => { if (!options.includes(e.target.value) && e.target.value !== "select") { setOptions((options) => [...options, e.target.value]); } }; return ( {selectList.map((item) => ( {item} ))} {optio.. nextjs Link태그에 _blank import Link from "next/link"; 새 탭으로 링크열기 경로를 직접설정하는것보다 .env나 파일로 따로빼서 export후 호출 https://stackoverflow.com/questions/65632698/how-to-open-a-link-in-a-new-tab-in-nextjs 브라우저단 에러 error - FetchError: request to http://localhost:8000/main failed, reason: connect ECONNREFUSED 127.0.0.1:8000 Nextjs 개인 프로젝트 도중 게시글 등록후 메인페이지(상품목록)로 이동하게해놨는데 계속은 아니고 가끔가다 한번씩 이런 에러가뜬다. 확실히 서버단에는 문제가없었다. 해결시도1. getServerSideProps()에서 getStaticProps()로 변경해보았다. 서버사이드는 브라우저환경이아니기때문에 윈도우 에러가 난다고한다. 상품목록은 staticProps를 권장한다고해서변경해보았으나 큰 효과는없었다. 해결시도2. localhost에서 127.0.0.1로 변경해보았으나 마찬가지로 에러가 떴다. 해결시도3. 환경변수 process.env로 처리(개발단) 여전히 에러발생!! 500에러이고 네트워크창을 보면 다음과같다 //General Request URL: http://localhost:3000/ Req.. Component Life cycle 기본개념 컴포넌트의 생명주기 * mount 페이지에 장착됨 : 컴포넌트 로드될때 사용 * update 업데이트됨 : 컴포넌트 업데이트될때 사용 * unmount 필요없을때 제거됨 : 컴포넌트 삭제될때, 다른페이지로 넘어갈때 과거 class로 만든 컴포넌트일때는 ComonentDidMount(), ComonentDidUpdate(), ComonentWillUnmount와같은 함수를 사용했다고한다. 이제는 useEffect훅으로 컴포넌트의 생명주기에 따른 조종이 가능하다. 마운트, 재랜더링될때마다 실행하고싶을때 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ 로드될때(mount), 업데이트될때마다 실행됨 console.. Nextjs styled-components 그냥 리액트 nextjs와 타입스크립트용 nextjs는 약간다르다. 그냥 리액트 nextjs yarn add styled-components _document.js import React from "react"; import Document, { Html, Head, Main, NextScript } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; .. 이전 1 2 3 4 5 다음
