프론트엔드/React

props로 함수 전달하기(매개변수x) //부모 컴포넌트 import React from "react"; import Child from "./Child"; const Parent = () => { // props로 전달할 함수 const testFunc = () => { console.log("addArticle 함수 호출"); }; return ; }; export default Parent; // 자식 컴포넌트 import React from "react"; const Child = ({ propsFunc }) => { return ( // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출 Add Article ); }; export default Child; props로 함수 전달하기(매개..

https://www.hanl.tech/blog/vs-code-react-time-awesome-snippets/

Vercel 배포 방법 1. github에 레포지토리를 만든다.(Public / Private 모두 가능이기 때문에 소스코드 공유 싫으면 Private로 레포 생성) 2. Vercel 회원가입 및 github 연동 (github으로 회원가입해야 레포지토리가 연동되는지는 모르겠음 웬만하면 깃헙으로 회원가입 ㄱㄱ) 3. Vercel에서 github 레포지토리(repositories) 불러오기(import) 4. Vercel 프로젝트 생성 및 설정 배포 이후 유지보수 1. 깃헙 레포지토리 클론한다. 2.유지보수 작업 후 커밋 3. npm run build 를 통해 재배포 github 호스팅에서 Vercel로 호스팅 서비스 변경 만약 gh-pages 를 이용한 github 호스팅을 이용하는 중이었고 Browse..

1. public 폴더 아래 background.jpg 이미지를 넣는다 2. 아래 코드 참고하여 배경 이미지를 적용할 DOM에 background-image 속성을 적용한다 const Background = styled.div` height: 100%; background-image: url("./background.jpg"); background-repeat: no-repeat; /* 배경 이미지 반복 설정 */ background-size: cover; /* 배경 이미지 크기 조절 (cover, contain 등) */ background-position: center; /* 배경 이미지 위치 조절 */ `; + 필자는 아래 참고자료를 참고해 경로를 background-image: url("/back..

What 비동기 처리란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. Why 왜 비동기 처리 특성을 갖는가? 클라이언트에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 응답을 줄 때까지 다른 코드를 실행 안 하고 계속 기다릴 수는 없기 때문이다. 예로 만약 클라이언트에서 서버에 보내는 요청이 100개일 경우에 비동기 처리가 아니고 동기 처리 방식이라면 데이터 요청과 응답 대기를 반복하여 실행 속도가 느려질 것이다. How 어떻게 해결하는가? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이 있다. 이는 기존의 비동기 처리 방식인 콜백..

https://velog.io/@lire_eruel/Objects-are-not-valid-as-a-React-child-found-object-Promise-%EC%97%90%EB%9F%AC-%EC%9B%90%EC%9D%B8-%EB%B0%8F-%ED%95%B4%EA%B2%B0 Objects are not valid as a React child (found: [object Promise]) 에러 원인 및 해결 평화롭게 React를 하던 개발자 A.... 뜻밖의 에러를 맞닥뜨린다....! Objects are not valid as a React child (found: [object Promise]) 에러를 만드는 코드의 예시는 다음과 같다. (회사 코드라 첨부할 수 velog.io

import React from "react"; const Main = () => { const arr = ['사과', '배', '오렌지', '복숭아'] // map을 통한 컴포넌트 렌더링 함수 // 매개변수로 전달된 배열의 요소를 하나씩 꺼내어 컴포넌트로 변환해 리턴한다. const PracticeMap = (arr) => { return ( {articles.map((item, index) => { // map 내부에서 변수 선언, 함수 호출 가능 return ( {index}번째 과일은 {item}입니다. ); })} ); }; return ( {PracticeMap(arr)} ); }; export default Main; https://goddaehee.tistory.com/303 [React]..

https://velog.io/@gin2808/React-useNavigate%EB%A1%9C-state-%EB%84%98%EA%B8%B0%EA%B8%B0 [React] useNavigate로 state 넘기기 리액트에서 화면이동을 위해서는 두가지 방법이 있다.Link와 useNavigate가 있는데 오늘은 useNavigate를 이용해 스테이트를 넘기는 걸 해보려한다.npm install react-router-dom --savenavigate("/이동할주소",{replac velog.io 예시 ////////// 프롭스 전달하기 예시 import { useNavigate } from "react-router"; const SignIn = () => { const navigate = useNavigat..