본문 바로가기

IT/React30

[리액트] setState 비동기 해결, 콜백함수 [예시 - 결과, 코드] 버튼을 클릭하면 숫자를 1 더하고 빼는 간단한 컴포넌트를 만들었다. alertNumber()라는 함수를 만들어 현재 숫자가 무엇인지 알려주는 창을 띄어준다. import React, { Component } from "react"; class Counter extends Component { state = { number: 0, }; alertNumber() { alert(this.state.number); } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); console.log(this.state); this.alertNumber(); }} > +.. 2021. 7. 12.
리액트 VSCode 자동완성 익스텐션 추천 (Auto Import, Code snippets 등) 리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript. [Forked] marketplace.visualstudio.com 파일명을 입력하면 자동으로 import가 된다. [예시] 만약 SearchHeader라는 컴포넌트가 있고, 다른 파.. 2021. 7. 6.
[리액트] useEffect-한번만 실행되게 하기 useEffect() = 어떤 effect를 발생시키는 Hook - 컴포넌트가 등장할 때, 그리고 컴포넌트가 업데이트가 되고 나서 항상 실행된다. - useEffect를 통해 클래스형 컴포넌트에서 사용 가능했던 생명주기 메서드를 함수형에서도 사용 가능해졌다. [참고] 리액트 훅에 대한 글 [리액트] React hook 간단하게 알아보기 참고) 한국어 버전 공식 문서이다. Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이.. breathtaking-life.tistory.com useEffect에 대한 설명은 짧게 하도록하고,.. 2021. 5. 6.
[리액트] state는 직접 수정 금지 state는 직접 수정하면 안된다. Why? 예기치 못한 버그 발생 가능 (무슨 버그인지는 구글링을 해보자!) 그럼 state 수정 어떻게 하나요? 배열을 복사하면 됩니다!🤗 배열 복사는 []와 spread operator를 기억하자 => 예를 들어, [...상품] ...(spread operator)으로 원래 있던 데이터의 대괄호를 벗기고, []로 다시 감싸준다. 아니면 map이나 filter를 사용해도 된다. 이 아이들도 새로운 배열을 반환해주기 때문에! 예를 들어 data.js 파일에서 채소 데이터 3개를 가져오고, 더보기 버튼을 눌렸을 때 ajax로 다른 채소 3개를 가져온다고 하자! import Product from "./Product"; import Data from "./data.js"; .. 2021. 5. 4.
[리액트] yarn/npm start가 너무 느릴 때 해결방안 리액트로 만든걸 보기 위해 yarn start를 입력하고 크롬 창을 띄웠다. 코드를 수정하고 적용된 화면을 보기 위해 새로고침을 눌렸는데 결과물을 보기까지 대략 15초가 걸렸다! 무한정 돌아가는 로딩바.... 너무 답답해서 찾아보니 스택오버플로우에 나와 비슷한 고민의 글이 있었고 yarn의 버전이 문제였다. super slow node npm commands I have node v.4.4 with npm v.2.14.20 (default bundled with windows installer). My OS: Windows 7 64bit. Hardware: Dell laptop, 16GB RAM, SSD, core i7. I'm facing a problem with extremely slow npm. .. 2021. 1. 27.
[리액트] firebase로 로그인 기능 구현하기 현재 나는 로그인 기능을 구현하고 있다. 이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능. ​ ​ firebase를 이용하여 apiKey를 비롯한 항목들을 불러왔다. ​ const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; 그리고 루트 디렉토리에 .env 파일을 생성하여 값들을 붙여 넣었다. REACT_APP_API_KEY="", REACT_APP_AUTH_DOMAIN="", REACT_APP_DATABASE_URL="", REACT_APP_PROJECT_ID="", REACT_APP_ST.. 2021. 1. 14.

티스토리툴바