#06 리액트 숙련 : useState 함수형 업데이트

0. TIL ▶ useState 함수로 사용 장점은 함수로 useState 사용시 props를 받을 필요가 없음 ▶ setState만 있어도 매개변수(prev)로 데이터(comments)를 가져올 수 있음 const [number, setNumber] = useState(0); ▶ 함수형 업데이트: setNumber(()=>{}) ▶ setNumber( (현재값(prev) =>{ return prev +1 }) = setNumber(number +1) : ▶결과는 같지만 차이점이 있음!! (동일 코드 3번 실행했을ㄸㅐ) (1) 기존 값 setNumber(number +1) - 배치성으로 업데이트 진행 (변경된 사항을 한번에 모아서 1번만 업데이트) setNumber(number +1) setNumber(..

  • format_list_bulleted TIL :: Today I Learned
  • · 2023. 11. 13.
  • textsms
[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

TIL ▶ styled-component는 작성 위치가 정말 중요하다 [오류 증상] styled-component를 적용시키고 나서 input 박스에 입력시 속도가 매우 느리고 포커스가 나감 [확인] 개발자도구로 확인하니 콘솔창에 해당 warning 확인 [문제 파악] 찾아보니 styled-components로 만든 요소의 선언 위치 때문이라고함! Header.jsx부분이 문제인것 같아 찾아보러감 >> 아니였음 styled component안에 직접적으로 작성한 함수가 문제였음 ▼문제 코드 ▼ import React from 'react'; import styled from 'styled-components'; function WriteComments() { const StDivWrite = styled..

  • format_list_bulleted React
  • · 2023. 11. 12.
  • textsms
[오류] 리액트 React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed

[오류] 리액트 React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed

[오류] React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed~~ [해결] App.js -> App.jsx로 변경 [참고자료] "React has detected a change in the order of Hooks" but Hooks seem to be invoked in order I am trying to use Context and Reducers via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was t..

  • format_list_bulleted React
  • · 2023. 11. 12.
  • textsms
[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

[원인] 자식 컴포넌트에서 매개변수를 구조분해할당으로 안 가져옴. (전) function AddMessage(datas, setData) { (변경 후) function AddMessage({datas, setData}) { 1.Home.jsx const initialState = [ { id: uuid(), name: '하니팬', content: '하니최고최고', idol: '하니' }, { id: uuid(), name: '혜린팬', content: '혜린최고최고2', idol: '혜린' }, ]; const [datas, setData] = useState(initialState); ▶ 여기에서 를 컴포넌트로 만들어서 사용하기 ▶ (기능) 댓글 남기기 기능과 유사 2. AddMessage.jsx i..

  • format_list_bulleted React
  • · 2023. 11. 11.
  • textsms

#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, zerotonine2da.tistory.com 1. 오늘 연결된 상세페이지 😊😊 [어제 연결이 이상했던 이유] ▶우선 home 화면을 제대로 설정하지 않았음. + App.jsx에서 바로 진행하려고 했음. ▶ react router dom의 사용법 미숙 [구현 정리] 1. App.jsx에서 로 구성하기 2. Home.jsx를 보여주고 싶은 메인화면으로 ..

  • format_list_bulleted TIL :: Today I Learned
  • · 2023. 11. 10.
  • textsms
#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기(실패)

#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기(실패)

[원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! ▼구현 성공 #05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공) 0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되 zerotonine2da.tistory.com 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Detail from '../page..

  • format_list_bulleted TIL :: Today I Learned
  • · 2023. 11. 9.
  • textsms