프로그래밍 공부내용 (33) 썸네일형 리스트형 리액트와 순수함수 리액트 공식문서를 보면 "모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다." 라는 말이 나온다. (https://ko.reactjs.org/docs/components-and-props.html) 무지성으로 혹은 관습적으로 본능에 맞긴 채 컴포넌트 분리를 하고 왔던 터라, 순수함수가 궁금해졌다. 찾아보니 다들 비슷한 정의이긴 했는데... 믿을만한 소스가 없어서 위키에서 검색해봤다. 1. 함수에 같은 값을 주면 항상 같은 값을 줘야한다. 2. 외부의 상태를 변경하지 않는다. - 그냥 보면 이해가 안 갈 것이기 때문에 예시를 들고 왔다. fucntion add(a, b){ return a+b; } add(3,5) //8 많이들 보여주는 예시이다. 외부 값이 변하지.. Create portal - 간단 요약 모달창같은 경우 리액트에서 제공하는 Create Portal을 이용하면 좋다는 피드백이 있어서 찾아보았다. 사용방법은 매우 쉬웠는데 return 해줄 컴포넌트를 ReactDOM.createPortal() 함수로 감싸주기고 2번째 인자로 document.body 를 넣어주면 된다. ------------------------------------- - DETAILS 리액트 v16에서 도입 됐는데, 사실 그냥 구현해도 되는걸 좀 편리하게 빼놓은 것에 불과하다. 공식문서상 설명은 이렇다. ReactDOM.createPortal(child, container 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째.. 절대경로로 import 하기 1. js를 이용해서 Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 원문이다 jsconfig나 tsconfig 파일에 아래와 같은걸 추가하면 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } baseUrl이 './src' 파일로 설정되고 src/components/Button.js에 잇는 Button을 import 한다고 했을 시 import Button from 'components/Button'; 처럼 좀 더 간단하게 import 할 수 있다. 1. Ts를 이용해서 TS.. 리액트의 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를 써서 해결했다. pull을 통해서 페어가 작업한 내용 가져오기 1. 원본을 fork뜬 후 github에서 진행 2. 해당 레포를 clone해온다. git clone {repo url} {dir} 3. 그리고 페어랑 작업한 레포를 remote등록을 해주고 git remote add pair {페어의 브랜치 주소} 4. 거기서 작업했떤 branch를 가져온다 git pull pair {branch이름} //sourceTree가 가끔 안올라갔을때 origin이 없음// git remote add origin {내 레포 주소} 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.. 이전 1 2 3 4 5 다음
