프로그래밍 공부내용/리액트(React) (13) 썸네일형 리스트형 리액트의 state와 보안 신용카드 예제에서 내 리뷰어님이 달아주신것은 아니지만 블링이라는 페어에게 로이정님이 달아주신 것을 읽어봤다. 그래서 formData를 찾아봤다. https://developer.mozilla.org/ko/docs/Web/API/FormData/FormData FormData() - Web API | MDN FormData() 생성자(Constructor)는 새로운 FormData객체를 만듭니다. developer.mozilla.org 아마 formData로 가지고 있다가 처리하면 될거라고 하셨는데,,, 결국에 그럼 비제어 component로 가는 방향이 될거라고 한다. 제어로는 어떻게 할까 생각해 봤는데, 블링도 내 생각과 똑같이 적어줬다. 간단하게 해시와 솔트를 해서 암호화 한 다음 state에 저장하.. 간단한 예제.. 신용카드 예제 하면서 만료일 등록 로직에 month등록같은 경우에 1을 등록하면 01이 되고 11을 등록하면 11이 자동으로 되도록 하는 코드가 필요했다. 어떤식으로 해야할지 고민하다가 처음에는 정규식으로 했다가 실패했고 리뷰어님의 로직을 참고해서 그냥 결국에 js를 써서 해결했다. form 태그 활용 리액트에서 form 태그를 쓰면 내부에 존재하는 input을 추적가능하다 코드를 보면 onchange를 form에 달아줬는데도 안에 있는 input이 어떤 dom인지 추적해서 알수 있다. form 안에서의 focus이동등에 쓰면 좋을 듯 하다. useState와 useReducer의 인자에 대해서(about useState, useReducer arguments) useState와 reducer의 효율성에 대해서 공부하다가, 리렌더링 시마다 값을 호출하는 문제에 대한 글을 봤다. 만약 state값을 초기화할때 number, string같은 값이 아니라 함수를 이용해서 생성하고 싶을 땐 어떻게 할까? 1. useState import { useState } from 'react'; const initialMaker = () => { console.log('initialMaker Called'); const init = 0; return init; } const TestComponent = () => { console.log('testComponent called'); const [state, setState] = useState(initialMaker); const.. Create-React-App(CRA) 설정 뜯어보기 들어가기 Create-React-App(이하 CRA)를 하게 되면 index.js 와 index.html 등을 만들어 주고 react에 필요한 dependacy들을 설치해 주고 react-scripts 를 이용한 리액트 명령어를 추가해준다. 또 간단하게 아래와 같은 것들도 설정해준다. 아래의 것들은 그중에서 필요한가? 싶었던 것들과 이게 뭔데 싶은 것들을 정리한 것이다. git ignore ##.gitignore # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /bu.. 이전 1 2 다음
