web/react4 [React] VAC Pattern을 적용해 관심사 분리하기 VAC(View Asset Component) Pattern View Logic과 렌더링을 분리하여 개발하는 설계 방식 const SpinBox = () => { const [value, setValue] = useState(0); return ( setValue(value - 1)}>- {value} setValue(value + 1)}>+ ); }; VAC props를 통해서만 제어 되고 스스로 상태를 관리 하지 않는 Stateless component // VAC const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( - {value} + ); // View Component const SpinBox = () => { const [value, s.. 2023. 12. 5. [React/함수형 컴포넌트] props가 undefined인 경우 default value로 인한 useEffect 무한 루프 (state update와 rendering) Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 일단 제목과 같은 문제가 발생하게 된 경위부터 이야기해보겠습니다. Parent component에서 비동기적으로 서버에서 데이터를 조회하고 child component에 props로 전달합니다. child component 최초 렌더링 시에 에러를 방지하기 위해 props에 default value를 할당합니다. 그리고 props가.. 2021. 9. 16. [React] SPA, Routing, React-router, History, Hooks SPA(Single Page Application) SPA는 단어 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. SPA 이전의 애플리케이션은 페이지 전환이 발생할 때마다 서버에 해당 페이지를 요청하는 SSR(Server-side Rendering)방식을 사용했습니다. 이러한 방식은 페이지가 다시 렌더링 될 때까지 사용자가 빈 화면을 보며 대기해야 하므로 사용자 경험에도 좋지 않을 뿐더러 변하지 않는 Header나 Footer도 다시 렌더링하기 때문에 비효율적입니다. SPA는 페이지 전환이 일어날 때마다 서버에 요청을 보내지 않습니다. 대신, 최초로 애플리케이션을 로드하는 시점에 모든 정적 리소스를 받습니다. 이후 사용자 요청에 따라 필요한 데이터만 서버에 요청하고 동적으로 페이지를 변경합니.. 2021. 6. 16. [React/Ant design] Ant design form validation - 회원 가입, 로그인 폼 검증하기 (Form instance/ validator) Ant design validator와 form instance로 form validation하기 : 회원 가입, 로그인 폼 만들고 값 검증하기. Ant Design은 버전 4를 사용해야 합니다. Ant design은 Form 컴포넌트의 Item에 대하여 validation 기능을 제공하고 있습니다. Antd가 제공하는 Rule 필드를 통해 기본적으로 type, required, min length, max length, 정규식 검증이 가능합니다. 필요하다면 custom validation도 가능합니다. 각 필드에 대한 유효성 검증을 위해 pattern을 사용했습니다. 그런데 검증 결과에 대한 부정을 할 수 가 없어서 공백 검증이 안됐습니다. 정규식.test(값) 이렇게 해서 false 면 메세지를 보여.. 2021. 3. 19. 이전 1 다음
