우선 React를 사용한다면 useState, useEffect, redux 등등... 기초적으로 알게 되는 것들이 있다. 오늘은 그 중 useState와 useEffect의 동작 방식을 이해해볼까한다. 아래 코드에서는 무슨일이 일어나며 어떻게 동작할지 알아보자. 과연 콘솔에는 어떻게 찍힐까? init [ 1 ] state => 0 [ 2 ] state => 0 init [ 1 ] state => 1 이렇게 찍힐 것이다. 선형 실행 되면서 setState가 비동기로 처리되기 때문에 다시 한 번 선형 실행되게 된다. useEffect의 종속성 배열 부분에는 아무것도 선언하지 않았기에 그대로 끝이다. 다음 코드를 보자. 과연 이번에는 어떻게 찍힐까? 종속성 배열 부분에 stsate를 추가했으니 state ..

우선 typeScript, npm, node 버젼은 아래 링크에서 확인바란다. https://growait.tistory.com/32 [ Font-awesome ] [ React ] [ TypeScript ] 폰트어썸 설치부터 적용까지 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com font-awesome의 아이콘을 사용해보도록 하자. 우선 growait.tistory.com 필자는 Formik로 input값들의 ..

회원가입 창에서 아이디 부분에 값을 입력 할 때 해당 오류가 갑자기 발생하였다. 하지만 컴퓨터는 거짓말을 하지 않고 이럴 때는 휴먼 에러일 경우가 매우매우 높다. 우선 필자는 해당 값을 useState로 관리하지 않고 ForMik로 관리하고 있었다. initialValues={{ email: '', password: '', firstName: '', lastName: '', sexType: '', birthDate: '', userId: '', submit: null }} 생각해보니 userId가 아닌 그저 id로 했을 때는 오류가 나지 않았다. 분명 선언도 null이 아닌 ''로 해서 오류가 날 일은 없을 텐데 곰곰이 생각해보니 userId로 명명을 바꾸고 나서 오류가 발생했다. 다시 확인해보니 nam..

까먹지 말고 기록하자. 기록하고 복습하자. 공부에는 끝이 없다. 앞으로 많이 나올 문구입니다..ㅎㅎ 게을러 지지 않고 꾸준히 공부하자는 의지입니다! 이번에는 저번 포스팅에 이어서 작성하겠습니다. import 경로에 확장자 명을 안 적은 이유는 'JS'라서 그런 거예요! 다른 확장자라면 명시해주시는 게 좋아요. 그리고 function으로 쓰나 const로 쓰나 큰 차이는 없어서 둘 중에 편하신 거로 사용하셔도 될 거 같아요! 저는 arrow 문법이 예뻐서...ㅎㅎ export default Home; Home을 export 해준다... 간단하게 설명 적어보았습니다. 혹시 이해가 안 되신다면 댓글 남겨주세요!!

안녕하세요 뭐든 처음 접해보면 아주 사소한 것도 큰 벽처럼 느껴지죠 네... 제가 바로 그랬습니다 😢 화면을 이동시키려고 하는데 구글링 해보니까 대체적으로 'react-router-dom'을 사용해서 하더라구요 하지만 import 할 때 부터 막혀버립니다. import { BrowserRouter, Routes, Route,} from 'react-router'; 다른 분들은 'BrowerRouter'를 사용하시는데 저는 이상하게 안 뜨더라구요 그래서 더 찾아보니 위에서 말씀드린 'react-router-dom'라는 걸 찾아서 사용했습니다!! 하지만 !!!! 이번엔 'Routes'가 없다고 난리를 치는군요. 그러면 어떻게 해야될까요 🤔 그냥 나눠서 import해줬습니다.. 되게 무식한 거 같지만 달리 방..

처음에 개발을 시작할 때 뭐가 뭔지 몰라 그저 thymeleaf로 앞단을 맡다가 비동기 처리 부분이나 백단으로 요청을 날리면 항상 reload 후에 다시 값을 뿌리는,,, 이런 부분이 좀 맘에 안 들어서 ajax로 백단을 찌르고 백단에서 다시 데이터를 넘겨줘서 화면에 뿌리고 있었는데 react, vue, angular 등등... 간편하게 해주는 친구들이 있더라구요. 그 중에 저는 react를 한 번 공부해보고 싶기도 하고 이전부터 react 코드가 왠지 모르게 예쁘게 보여서 꼭 공부해봐야지 하다가 드디어 접근해봅니다 ㅎㅎ 서론이 너무 길었죠 😀 React --> Spring boot로 data 넘기기 간단하게 react 화면에서 데이터를 백단으로 넘겨볼 건데요 기본적으로 제공되는 코드입니다. 이렇게 수정..