본문 바로가기
반응형
React에서 셋(Set)으로 체크박스 재정의하기 체크박스 기능 구현, 이게 이렇게나 복잡한 퍼즐이 될 줄은 몰랐다. 그래도 두 개의 구현 방법을 알아내긴 했다. 그 중 하나인 '셋(Set)' 자료구조를 활용한 방식은 신기하고 인상 깊었다. 셋은 알고리즘 공부할 때나 가끔 봤었는데, 예전에 면접에서 써봤다고 괜히 얘기 꺼냈다가 라이브로 관련 문제까지 풀었었던 아찔한 기억이 있다.(물론 떨어졌다.) 그래서 이 글에서는 제대로 이해하고자 체크박스 기능 구현을 통해 알아보려고 한다. 우선, 배열을 사용하여 구현한 방식을 살펴보고, 이를 개선하기 위해 셋을 이용한 방식까지 소개한다. 따라서, 이 두 가지 방식을 비교하고, 셋을 이용한 체크박스 기능 구현이 어떻게 기존의 배열을 사용한 방식을 개선할 수 있는지에 대해 살펴보자. 잠깐, 체크박스 UI란? 체크박스 .. 2023. 5. 14.
React에서 DataTables 사용하기(반응형 테이블) jQuery용 DataTables와 리액트를 함께 사용하는 일은 많이 없을 거라 생각합니다. MUI, Ant Design과 같은 호환성이 좋은 선택지가 이미 있기 때문입니다. 그럼에도 여러 상황에 따라 이 조합을 써야할 경우가 있습니다.(바로 저처럼..) 그런데 사용하면서 느낀 건, 생각보다 강력한 도구라는 것입니다. 테이블 형태로 노출되는 화면을 어떻게 반응형으로 만들어야 할지 막막했는데, 이 부분을 DataTables가 시원하게 해결해주었습니다. 이름에서도 알 수 있듯 DataTables는 jQuery(이하 제이쿼리)에 대한 의존성을 갖습니다.(v1.11부터 non-jQuery 방식으로 초기화가 가능하지만 여전히 제이쿼리에 의존성을 갖고 사용합니다.) 제이쿼리와 리액트 둘 다 DOM(Document .. 2022. 9. 22.
[번역] useEffect 단순화 Photo by Christopher Burns 원문 : https://tkdodo.eu/blog/simplifying-use-effect 글에서 오타나 오역을 발견하신 경우, 댓글로 알려주시면 감사하겠습니다. 의역이 포함되어 있습니다. :D useEffect. 모두에게 필요한 훅이지만 누구도 원하지 않습니다. 리액트 공식 문서에 따르면 이것은 "리액트의 순수 함수형 세계에서 명령형 세계로 탈출하는 창구"입니다. 리덕스 원작자이자 리액트의 핵심 팀원인 댄 아브라모프(Dan Abramov)가 작성한 useEffect 완벽 가이드는 49분 분량이며, 실제로 이해하는 데 최소 두 배의 시간이 걸립니다. useEffect는 리액트에서 얻을 수 있는 만큼 복잡하고, 이것 없이 애플리케이션을 작성할 수 있을 가능성.. 2022. 9. 12.
MUI Data grid column default value 설정 방법 MUI Data grid는 기본적으로 column의 필드값이 존재하지 않으면 빈값으로 노출이 됩니다. 하지만 상황에 따라 기본이 되는 값을 변경하고 싶을 때가 있습니다. 예를 들어 날짜별로 제품의 주문횟수들을 계산할 때, 주문이 들어오지 않아 받아오는 데이터에 해당 속성이 없다면 어떻게 할까요? 코드로 확인해보겠습니다. 코드 import { Box } from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; const rows = [ { id: 1, date: '01', name: '반팔', orders: 2550, stock: 9230 }, { id: 2, date: '02', name: '코트', stock: 1872 }, { id: 3,.. 2022. 8. 30.
[React.js] 엘리먼트(Element)와 컴포넌트(Component) 엘리먼트(Element) 전 React 엘리먼트를 영화의 프레임으로 생각합니다. React 엘리먼트는 매 순간 어떻게 보여야 되는지 파악하고 변하지 않습니다. - overreacted React 앱의 화면을 표시하는 가장 작은 구성 요소로써 일반 객체(plain object)이다. 영속성을 가지지 않는다. 즉 매번 새로 만들어지고 버려진다. 불변함을 가지기 때문에 생성한 이후 해당 엘리먼트의 자식이나 props을 변경할 수 없다. 따라서 다른 렌더링을 보여주고 싶다면 새로운 엘리먼트 트리를 생성해야 한다. React 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체와 같다. React.createElement( type, [props], [...children] ) type 인자로는 태.. 2021. 7. 17.
[React.js] JSX와 XSS(Cross Site Scripting) 공격 JSX 마크업과 UI 로직을 둘 다 포함하여 개발을 할 수 있다. 익숙한 문법으로 협업에 용이하다. 컴포넌트별로 분류하여 유지보수를 쉽게 할 수 있다. 속성 정의는 따옴표('')를 이용해 문자열 리터럴이나 중괄호({})로 JS 표현식(문법, 변수 등)을 삽입할 수 있다. HTML보다는 JS에 가깝기 때문에, 클래스 명명은 camelCase 명명 규칙을 사용한다. React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프한다. 따라서 앱에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 내용을 렌더링 되기 전에 문자열로 변환한다. 이런 특성들로 인해 XSS(Cross Site Scripting) 공격을 방지할 수 있다. 이스케이프(Escape) 특정 문자를 원래의 기능에서 벗어나게 변.. 2021. 7. 14.
[React.js] Netlify로 배포 후 새로고침 에러 | Page Not Found 최근 Netlify로 토이 프로젝트 배포 후 첫 로그인은 화면이 잘 뜨지만 새로고침 시 위와 같은 에러가 발생했다. 거기에 첫화면은 잘 렌더링 되지만 콘솔엔 failed to load resource까지 뜨는 아이러니..배포가 끝이 아니었던 것이다. 배포 후에 조금씩 원하는 기능을 추가하려 했지만 이슈 해결에만 이틀정도 소요된 것 같다. 그 중에 해당 에러가 가장 눈에 띄고 거슬려서 구글링을 시작했다. 그래도 구글링 실력이 좀 늘었는지 완벽한 해결방법은 아닌 것 같지만 간단하게 해결이 가능했다. 내 프로젝트같은 경우엔 처음 페이지에서 로그인을 하면 로그인이 유지가 되는데 여기서 새로고침 시 문제가 발생하는 것 같았다. 아마 새로고침을 하면 로그인 정보를 못불러오는 것 같은데..이게 CSR 문제인건지, R.. 2021. 7. 9.
반응형