전체 글69 [React] useEffect 이 글은 별코딩강의를 기반으로 작성되었습니다! useEffect가 사용되는경우 1. mount (화면에 첫 렌더링) 2. update(다시 렌더링) 3. UnMount(화면에서 사라질때) 사용방식 1. 렌더링될때 useEffect의 사용방식에는 두가지 방식이 있음 //1 useEffect(() => { //작업 }); //2 useEffect(() => { //작업 },[value]); 1. 렌더링 될때 마다 콜백 실행 2. 화면에 첫 렌더링 될때 콜백 실행, value값이 바뀔떄 콜백 실행 (만약 빈배열을 준다면 컴포넌트가 제일 처음 렌더링 될때만 실행됨) 1-1. 실습!! import React, { useState, useEffect } from 'react'; import './style.css'.. 2022. 7. 29. [React] study day 4 1. 스터디 220728 💑 좋았던 것(Liked) : 스터디 방향에 대해서 다시 한번 이야기해보는 시간이었다.... 빨리........ 듣고싶다..!!!!! 🌟 배운 것(Learned) : 리덕스의 필요성... 💦 부족했던 것(Lacked) : 진도..!!!! 빨리 맥스강의랑 훅이랑 리덕스 배워야지1! 🌻 바라는 것(Longed for) : 훅, 리덕스, 등등 빠르게 조지자!!!! 2022. 7. 28. [React] React Hooks - useState 실습 어제 수업시간에 배운 것과 리액트 훅스 시리즈를 토대로 useState의 간단한 예제를 만들어보았다. const [상태, set상태] = useState(초기값) useState는 상태가 변하면 다시 렌더링을 한다. 그래서 엄청 무거운 데이터의 경우 초기값에 값을 직접 넣어주거나 다른 변수로 선언한 뒤에 바로 전달하면 리렌더링을 할 때마다 렌더링을 할 때 마다 엄청무거운 초기값을 계속해서 불러와야한다. 무거운 데이터를 사용해야 한다면, 초기값에 무거운 데이터를 바로 전달하지 말고 화살표함수로 전달해주어야 한다. 이렇게 하면 처음에 페이지가 불러와졌을 때만 데이터를 불러오고 상태가변할때마다 데이터를 다시 불러오지 않아서 효율적이다. //BAD const heavyWork = () => { console.l.. 2022. 7. 27. [React] Attempted import error: 'useHistory' is not exported from 'react-router-dom'. useHistory를 사용하려고 했다. import { useHistory } from "react-router-dom"; function NewMeet() { const history = useHistory() } export default NewMeet; 사용하기 위해서 react-router-dom을 설치하고 적용했더니 상단 사진과 같은 에러가 뜨면서 사용이 안되었다. 에러! Attempted import error: 'useHistory' is not exported from 'react-router-dom'. 해결방법 react-router-dom이 v5에서 v6이 되면서 useHistory가 사라졌다..! useNavigate로 수정해줘야한다! (공식문서) import { useNavigate.. 2022. 7. 27. 이전 1 2 3 4 5 6 ··· 18 다음
