탁월함은 어떻게 나오는가?

[리액트란?] 리액트를 사용하여 프론트엔드 개발을 할 때 두가지 방법으로 컴포넌트를 선언할 수 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두가지 방법에 대해 알고 있어야, 필요한 상황에 맞게 사용할 수 있으므로 각각의 방법에 대해서 좀 더 깊이있게 살펴봐야 겠다. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이플 사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질 때, 변할 떄 작업을 수행할 수도 있다. 컴포넌트의 목적에 따라 프리젠테이션 컴포넌트..

redux의 sate 초기화 redux를 사용하다보면 state가 초기화 되는 경우가 있다. react에서 버튼을 클릭시 다른페이지로 이동할 경우, a tag를 흔하게 사용한다. state초기화 되는 이유 a태그를 사용하면 라우트를 이동시 redux의 전역 state가 모두 초기화 된다. 그 이유는 a 태그의 기본 속성은 페이지를 이동시키면서, 페이지를 새로 불러온다. 그렇게 되면서 react 앱이 지닌 상태도 초기화 되기 때문입니다. 초기화를 방지하는 방법 react에서 페이지를 이동시킬 때 react-router-dom 의 Link 컴포넌트를 사용하면 된다. Link 컴포넌트는 브라우저 주소만 바꾸고, 페이지를 새로고침 하지 않기 때문에 react 앱의 state를 초기화 하지 않는다. 클릭을 이용해..

필자가 redux toolkit을 사용하는중에 TypeError: Obejct(...) is not a function에러가 발생. react reduxToolkit 에서 reducers를 reducer로 잘못적었은 상태에서 dispatch를 보냈더니 리듀서를 인식못하고 생기는 에러였다.... 수정 전 : 수정 후 : 자바스크립트에서는 단순한 실수가 엄청난 고통을 준다... 항상 조심 또 조심 베타존 : 네이버쇼핑 스마트스토어 나를 꾸미다 - 인테리어소품 베타존 smartstore.naver.com

dispatch함수를 사용하다보면 dispatch안에 있는 함수가 Reucer가 아니라는 에러가 나온다. 그럴경우에는 리듀서 선언을 빠트린 부분이 있는가를 확인해야한다. 나의 경우에는 삭제를 하는 부분을 작성하다가 생긴에러이다. 그렇기에 delReviewIem선언을 확인해보았다. reducer: actions의 구조분해할당을 제대로 했는지 확인. container에도 선언되었는가 확인 그리고 하위 컴포넌트들에도 필요한 만큼 선언되어있는지 확인이 필요하다. 해결완료: 결국 선언이안되어서 생기는 에러니 선언을 확인 후 확인해보면 실행이된다. 베타존 : 네이버쇼핑 스마트스토어 나를 꾸미다 - 인테리어소품 베타존 smartstore.naver.com

VS코드에서 React 코드를 하다가보니 제대로 값이 전달되지 않았다. 무슨일인가 찾아봤더니 value 부분이 색깔이 짙어져있었다. 짙어져있다면 'value'가 선언은 되었지만 해당 값이 읽히지는 않는중이다. 여러가지 시도하다가 보니 해결한 방법은 [name]: value, 로 수정하는 것이 해결법이였다. 전체 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 7..

State는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다. 여기서 전역변수는 component를 의미한다. 곧 JS로 이야기하면 JSON과 function을 의미한다. React 대표적인 hook 함수에는 useState()와 userEffect()가 있다. 이러한 훅이 존재하는 이유는 함수형 컴포넌트에서 state와 같은 생명주기 함수와 같은 기능을 사용하기 위해서 HOOK을 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React, { useState, useEffect } from 'react'; const ReactHook = () => { const [contents, setContent] = useState('[THIS IS..