본문 바로가기

react6

[React] 왜 컴포넌트에서는 React를 호출하는가

import React from 'react'; // ... 리엑트 함수 컴포넌트를 만들면, 항상 React를 임포트해줘야 합니다. 그 이유는 runtime에 빌드된 파일 안에서 React.createElement를 찾지 못하는 오류가 발생하기 때문임. 2022. 7. 9.

[React] 하위 컴포넌트에서 상위컴포넌트로 이벤트 전달 방법

리액트에서 하위 컴포넌트가 상위 컴포넌트의 함수를 실행하는 방법 상위 컴포넌트 export default function 상위 컴포넌트() { const [isEditMode, setIsEditMode] = useState(false); function closeEditMode() { setIsEditMode(false); } return ( ) } 하위 컴포넌트 export default function 하위컴포넌트({ closeEdit }) { async function editTweet(event) { event.preventDefault(); try { 서버로 무언가 submit closeEdit(); 👈 이 부분이 상위 컴포넌트의 함수를 실행시킴 } catch (error) { alert(err.. 2022. 7. 6.

[React] 렌더링이 두 번 발생하는 이슈

이슈 현상 같은 컴포넌트가 렌더링이 두 번씩 실행됨. 그래서, UseEffect 훅으로 렌더링 때마다 호출하게 되어있는 API가 두 번씩 호출됨. 원인 npx-create-react-app 으로 생성하면 기본적으로 달려있는 설정인 때문임. // ./src/index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./static/index.css"; import App from "./components/App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 해결방법 // ./src/index.js import .. 2022. 6. 28.

[react] memo

개요 react + typescript + react beautiful dnd 로 드래그 앤 드롭으로 정렬기능을 구현했습니다. 리스트 중에서 하나의 아이템을 드래그 해서 정렬하면, 정렬은 잘 되는데, 문제가 생겼습니다. 옮긴 아이템과 그 이후에 순서가 밀려나야 하는 아이템들만 렌더링 되는게 아니라, 리스트 아이템 전체가 새로 렌더링이 되면서 잠깐 모든 리스트들이 깜박이는 현상이 발생했습니다. 해결 방법은 react의 memo hook을 사용하는 것입니다. react memo를 사용하는 방법 👇 이전 코드 👇 memo를 사용해서 prop가 변경되지 않은 Card 컴포넌트가 다시 렌더링 되지 않도록 수정한 코드 2021. 12. 29.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 깃허브 세팅 페이지 설정 2021. 11. 28.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 2021. 11. 27.

티스토리툴바