본문 바로가기

React

 (4)
react-router-dom v5에서 link로 이동시 화면이 redirecting 되지 않음.. 앞서 redux 예제를 만들어 보면서 ownProps 값에서 파라미터 값 등의 정보가 받아와지지 않아 react-router-dom을 v5로 다운그레이딩하는 과정을 경험했다.. [Redux] 컴포넌트에서 connect로 ownProps 받을 때 컴포넌트 props 값 모두 받아오기 react에서는 상태관리를 주로 mobx로 했기 때문에 생소했던 Redux. 요즘 틈틈히 redux로 이것저것 만들어보고 있다. 처음은 역시 베이직 오브 베이직인 todolist. 블로그와 유튜브에서 본 대로 만들어 봤 bomango.tistory.com 그런데 생각해보니 react-router-dom에는 useParams 등과 같은 기능이 있는데 굳이 다운그레이딩하면서 ownProps에 파라미터 값을 받아와야할 이유가 없었음..
[Redux] 컴포넌트에서 connect로 ownProps 받을 때 컴포넌트 props 값 모두 받아오기 react에서는 상태관리를 주로 mobx로 했기 때문에 생소했던 Redux. 요즘 틈틈히 redux로 이것저것 만들어보고 있다. 처음은 역시 베이직 오브 베이직인 todolist. 블로그와 유튜브에서 본 대로 만들어 봤는데, 내가 작성한 코드에서 뜻밖에 문제점?을 발견했다. 의도는 Home.js 라는 컴포넌트에서 connect로 state값과 props값을 불러오고자 했다. import { connect } from 'react-redux'; const Home = (props) => { console.log('props:', props); return ( ); }; const mapState = (state, ownProps) => { console.log(state, ownProps); return ..
React에서 (api 데이터) json형식 데이터 가져오기 및 원하는 데이터 추출 등 데이터 관리 방법! 프로젝트를 하다보면 작고 큰 데이터들을 가져다가 출력하고 수정하고 삭제하고 등등의 작업들을 처리한다. (보통은 이런 작업들이 전체 작업의 주를 차지하는 것 같다..) 규모가 큰 데이터 혹은 등록, 수정, 삭제 등이 필요한 데이터는 당연히 api 통신을 통해 작업하는게 맞는데, 규모가 크지 않은 소소한 제품 데이터의 경우(별도의 추가나 수정이 필요없는)는 별도의 js 파일에 오브젝트 혹은 배열을 담은 변수로 관리 하곤 했다. // Item.js const Items = { data: [{ name: '아메리카노', taste: '쓴 맛', type: ['아이스', '핫'] }, { name: '라떼', taste: '고소한 맛', type: ['아이스', '핫'] }, { name: '말차라떼', tast..
react portals로 popup 혹은 tooltip툴팁 만들기 리액트를 시작한지 어언 5개월차.. 매번 쓰던 hook 말고도 다른 기능들을 독학하기로 결심했다. 그중 리액트 포탈이라는 것을 보고 여기 정리해두고자 한다. 리액트의 기능 중 하나인 Portal 포탈은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공.. 한다고 공식 문서에 명시되어 있다. Portals – React A JavaScript library for building user interfaces ko.reactjs.org 쉽게 말하자면 객체를 생성했다가 원하는 DOM 위치에 추가해주는 기능을 가지고 있다. 때문에 팝업이나 툴팁처럼 같은 스타일의 컴포넌트를 여러 페이지에서 돌려막기? 할 때에 유용하게 쓰일 것 같다. 우선 마크업은 대충 요렇게 짜봤..

티스토리툴바