마이덕스타일

이 포스팅은 https://nomadcoders.co/react-for-beginners  강의를 보며 작성하였습니다.(무료!)  이번 section에서는 지금까지 배웠던 State, Effect, props를 연습하면서 지금 까지 배운 것들을 연습하고 적용해 볼 것이다.먼저 To Do List를 만들어보자!git : https://github.com/leesulgi66/React_for_Beginners/commit/f7ce28c1e54a926bb370047a601c5a8e15144137import { useState } from "react";function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useSta..

이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!)  이번 강의를 학습하기 전에 왜 이러한 것들이 필요한지 먼저 알아보도록 하자. 먼저 앞선 강의에서 배웠던 것을 활용해 똑같이 count를 세는 state를 만들어 보자.import { useState } from "react";function App() { const [counter, setValue] = useState(0); const onClick = ()=> setValue((prev)=>prev+1); return ( {counter} click me );}export default App;counter를 state로 선언해 주고 o..

react에서 console.log를 찍어보던 도중 의도하지 않은 랜더링이 두 번씩 되는 것을 확인했다. 이는 React.StrictMode 때문인데, npx create-react-app으로 생성하면 자동으로 생성되어 있다. index.js에서 를 제거 후 쉽게 해결이 되었다.root.render( );root.render( );  그렇다면 왜 이렇게 불필요한 랜더링이 두번 일어나는 것일까? 이는 개발환경에서 잠재적 오류를 체크하기 위한 도구라고 한다. 때문에 개발 과정에서는 StrictMode를 사용하는 것이 오류 발견에 더 유용할 수 있다. StrictMode는 아래와 같은 부분에서 도움이 된다고 한다.안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대..

이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!)  이제 본격적으로 script로 불러오는 방식이 아닌 react app을 만들어 본격적으로 react를 사용해 볼까 한다. react app을 creat 하는 도중에 npm install error ENOENT라는 작은 에러를 만났다.  우선 기존에 깔려 있던 node.js를 재 설치 한 후 댓글에 있는 방식으로 앱생성을 진행하였다.  생성한 폴더에서 터미널을 열고 node -v을 입력해 node.js의 설치를 확인했다. 그리고 px create-react-app . 을 입력 후 y를 눌러서 설치를 시작했다. 설치가 끝나니 여러가지 폴더와 파일들이 생성되었다!터미널에서 npm st..