마이덕스타일

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..

이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #4 Props  Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 이제부터 해볼 것은 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 것이다.중요한 점은 컴포넌트는 단지 JXS를 반환하는 함수일 뿐이다.  이러한 작업이 필요한 이유는 무엇일까? 만약 버튼을 만든다고 했을 때 비슷한 스타일의 버튼을 만들기 위해 설정한 style값을 모두 붙여 넣어 만든다면, 추후 수정이 있을 시 모든 버튼의 style값을 조정해야 할 것이다.function SaveBtn() { return Save Changes}function Confirm..

이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #3 State 이번에는 React에서 변수의 동적 제어를 하기 위해 State에 대해 공부하였다.기존의 코드에서 counter의 변수를 증가시켜 준 후에 rerender을 통해서 페이지의 바뀐 부분을 변경해 주었다. 하지만, 변수와 함수가 많아지면 관리해야 하는 코드의 양도 늘어나고 실수도 늘어날 수 있다. 따라서 use.State함수를 통해 자동으로 state의 값이 변하면 rerender 해줄 수 있다.const [vlaue, setValue] = React.useState(""); 위와 같이 React.useState() 함수를 이용하여 state 선언을 할 수 있다. 함수의 첫 ..