Front-end/React
-
React - context API를 사용해보자!Front-end/React 2021. 9. 7. 14:27
리액트에서 state를 관리하는 방법은 다양하다. 리액트는 단방향 워터풀 방식으로 부모에서 자식에게 props를 통해서 전달되어, 데이터 흐름이 일정하다. 그 말은 흐름을 비교적 알기 쉬워서 이해가 빠르게 된다는 장점도 가질 수 있다. 대표적으로 Redux, Mobx와 같은 것을 활용하여 state를 관리하게 되는데, Redux는 한번 사용하려면 귀찮다? 혹은 까다롭다? 라는 것이 따라붙는다. 큰 데이터도 아니고, 어떤 한 부분만 전달 하고 싶은 경우 굳이 Redux나 Mobx를 사용할 필요 없이 contextAPI를 활용할 수 있을 것이다. 특히 요즘은 contextAPI를 잘 만들어놔서 많은 경우 사용하기 좋다고 할 수 있다. 전체적으로 데이터를 전달해야하는 경우 Redux, Mobx를 사용하면 좋을..
-
portals을 이용한 리액트 모달창(modal) 만들기Front-end/React 2021. 7. 6. 17:20
(앞서 작성한 내용은 배움의 부족으로 나도 알아보기 애매해서... 다시 정리해서 올렸다.) 2021-10-22 수정 완료// (궁금한 점이 있거나, 틀린 부분이 있으면 말씀주세요~~!🧸) 프로젝트의 기획이 바뀌면서 모달을 만들어야 할 일이 생겼다. Modal은 리액트를 공부하다보면 한 번 쯤은 만들어보는 경우가 많이 있어서 간단하다고 생각했다. 그러나 공부를 할 때는 작동 방법에 대해서 배우느라 한 페이지에서 모달 창이 잠깐 나타나기만 하면 됐다. 하지만 프로젝트에서는 여러 곳에서 같은 Modal 창을 사용해야 한다. 그러면 단순히 component로 만들면 되지 않을까? 라고 생각 할 수 있지만 모달창은 의외로 복잡하다 (나만 그런가....) 한 사이트의 글을 발췌해보면 아래와 같다. "React's ..
-
리액트로 기간(날짜) 지정하기 date range ( react-flatpickr )Front-end/React 2021. 7. 5. 17:40
사실 사람들이 많이 사용하는 것으로는 react-datepicker, react-calendar, react-dates 등이 있다. 하지만 나는 이번 프로젝트에서 템플릿을 기반으로 사용하기 때문에 이미 설치 되어있는 react-flatpickr를 사용해보려고 한다. 어떠한 단점이 있어서 사람들이 많이 사용하지 않는 것 같은데, 결국 어떤 date picker던지 그 코어는 비슷하다고 생각되어 하는 김에 정리를 해놓으면 나중에 다른 것을 사용할 때도 도움이 될 것이라고 생각된다. 어디든지 사용 할 수 있는 flatpickr라는 것이 있는데 내가 사용한 것은 react를 위해서 나온 react-flatpickr 이다. 1. Installation 설치는 npm, yarn 두 가지 중 아무거나 사용할 수 있다..