REACT (7) 썸네일형 리스트형 [React] lodash _.merge 가 안된 경우 21번 라인을 보면 lodash 문법중 하나인 _.cloneDeep()를 사용하여 깊은 복사를 한뒤에 22번 라인에서 _.merge를 해주니 잘됫다. 사실 아직도 원인은 잘 모르겠다....원인을 찾아보려고 Object.getOwnPropertyDescriptors()를 사용하여 읽기쓰기 가능여부를 체크한결과 enumerable : true 또는 false, 열거 가능한지 여부 configurable : true 또는 false, 제거 가능한지 여부 value (선택) property의 값, 기본은 undefined writable : true 또는 false, true이면 읽기 쓰기 가능이고 false이면 읽기만 가능 모두 True 였다....원인은 뭔지는 모르겠으나 깊은복사로 해결을 했고 lodash에.. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. ref: DOM [ref:DOM 이란?] jquey에서 이런 식으로 ID값을 가져와 DOM를 직접 핸들링한다. React에서도 DOM를 직접 접근하고 싶을때 사용하는것이 ref DOM 이다. [예시] 컴포넌트에 ref 사용 : 스크롤 박스 조작하기 ( this.scrollBox=ref } } this.scrollBox.scrollToBottom() HTML DOM 에 ref 사용 : 특정 input 에 focus 주기 this.input=ref } /> this.input.focus() : 하단 예시를 보면 input에 입력한 값이 0000이면 텍스트필드의 색상을 lightgreen 아니면 lightcoral 으로 변경한다. 우선 CSS를 만들어준다. [ref 사용 전] [ref 사용 후] Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치 [Redux Toolkit 이란?] 1. Redux Toolkit를 사용하는 이유 Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식적으로 제공하는 개발도구 입니다. Toolkit 없이 Redux를 사용시 문제점 "Redux 저장소 구성이 너무 복잡합니다." "Redux가 유용한 일을하도록하려면 많은 패키지를 추가해야합니다." "Redux에는 너무 많은 상용구 코드가 필요합니다." Ex) --------------------------------------------------------------------------------------------------------------- 1개의 액션 생성을 하기위해선 [액션타입 정의 > 액션함수 생성 -> 리듀서 정의].. Debugger for Chrome(vsCode에서 디버그 사용하기) [설치] 1. 링크를 통해 설치 - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 2. VScode 확장 관리에서 검색 후 설치 빨간색 표시한 부분을 보면 설치하고 사용할 수 있는 부분이 있습니다 제대로 사용하고 계시다면 저 처럼 보여집니다. [설정] 1. F5 키를 누르거나 상단 메뉴에서 Run(실행) - Start Debugging(디버깅 시작) 를 누르게되면 Select Environment 창이 뜨는데 거기서 Chrome을 선택합니다. 2. launch.json 파일의 내용을 사진과 같이 바꿉니다. [사용방법] Debugger for Chrome을 사용하기 위해서는 우선 현재 개발중인 웹 어플리케이션.. React 공식 문서 Hook (2) : Hook 개요 [useState] 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. - 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다. - setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다. 1. hook를 호출하기 2. 함수 컴포넌트안에 state 추가하기 - 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. 3. state 변경하는 함수 실행해보기 -> setCount() - 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. - setCount() 는 Class컴포넌트에서 사용했던 this.setState와 비슷하지만 , 이전 .. React 공식 문서 Hook (1) : Hook 소개 [Hook 이란?] Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (React 16.8.0은 Hook을 지원하는 첫 번째 배포입니다. 업그레이드할 때 React DOM을 포함한 모든 패키지를 업데이트하는 것을 잊지 마세요. React Native는 v0.59부터 Hook을 지원합니다.) [Hook을 쓰는 이유] 1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. (문제) 기존 class 컴포넌트에서는 이 문제를 해결하기 위해 render props 그리고 고차 .. 이전 1 다음
