Front/React (13) 썸네일형 리스트형 MOBX Store 모델이 변경되었어도 렌더링이 안되는 이슈 정상적으로 코드를 작성한 경우에 렌더링이 안되는 경우 두가지 이유가 있었다. 나의 경우 테이블을 작성하고 검색하는 텍스트에 따라 결과를 뿌려주는 기능을 만들었다. 검색하여 Table의 Row의 결과값이 수정되었는데 변경이 되지 않았다. 간헐적으로 변경이 되지 않았는데 이유는 두가지였다. 1. @Observable DataModel 을 선언 할 때 하위 구조까지 명시해야한다. mobx 5버전 이상은 알아서 하위 변경내용까지 감지해준다. IE를 지원해야 하는 사이트의 경우 mobx 4버전을 사용해야하는데 이런 경우 내부까지 명시해주어야 한다. ex) @Observable Members : { Student : { ID:"", NAME:""}} 2. 키값이 중복되지 않아야 한다. ex) 키값이 중복되는 경우 .. url로 접근했을 시 정상적으로 렌더링 되지 않는 이슈 이슈 : Kanban 내에서 Link tag를 이용해 Route 컴포넌트에 접근하여 다른 컴포넌트를 render할 경우 문제가 없지만, url로 Route 컴포넌트에 접근하여 다른 컴포넌트를 render할 경우에는 화면이 비정상적인 이슈가 발생합니다. 원인 : 우리가 흔히 Route 컴포넌트에 render할 컴포넌트를 지정할 때 "component" 키워드를 사용합니다. component 키워드는 지정한 컴포넌트를 새로 mount 합니다. 따라서 component lifecycle 함수 중 mount와 관련된 함수(ex. componentDidMount, componentWillMount ...)가 동작합니다. 하지만 우리가 url로 접근할 경우 Route 컴포넌트에서 "render" 키워드를 사용한 것.. package.json 알아보기 https://velog.io/@skyepodium/package.json JQuery 기존 소스 React로 마이그레이션하는데 생기는 이슈 이슈 1. 전역 변수와 라이프사이클 jQuery를 사용할 때 전역변수로 function을 선언해 놓고 편하게사용하는 프로젝트들이 많다. 예를 들어 아래와 같은 함수를 전역변수로 정의했다고 가정하면 $(function () { $("[data-select]").select(); $("[data-popup]").on("click", function () { var $this = $(this), $parents, $x, $y; if ($this.data("popup") == ".member-select-wrapper") { $this.popup({ type: "open", x: 0, y: 0, width: "100%", }); } else { if ($this.parents(".box-item").length.. 리액트 처음 시작하는 나의 시행착오 노트 환경설정 때 했던 시행착오 1. git에 올리는 파일 public index.html manifest.json robots.txt resources fonts functions images styles temp src App.js index.js .gitignore package.json package-lock.json yarn.lock git clone후 npm install하면 package.json에 있는 모듈이 설치된다. npm start하면 git에서 받은 리액트 시작된다. 나는 초보라 create react app으로 시작했는데 그렇게 하면 쓸데없는 모듈도 많이 추가되어 프로젝트가 커질수록 비효율적이라고 한다. npm init하고 webpack, babel config 설정하고 쓰는 거라고 했.. 이전 1 2 다음