본문 바로가기

Front-end/ReactJS4

커스텀 드롭다운 메뉴 만들기 blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe ReactJS: Dropdown menus A quick guide on building dropdown menu interactions in React. blog.campvanilla.com letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks Building a Dropdown Menu Component With React Hooks We'll create a dropdown menu using React Hooks. letsbuildui.dev 첫번째 게시글은 클래스 컴포넌트에서, 두번째 게시글은 함수 컴포넌트에서 .. 2021. 1. 9.
useState 사용 시 배열 아이템 업데이트 방법 dev.to/brettblox/react-hooks-usestate-43en React Hooks - useState The useState hook allows us to make our function components stateful. Create and Initial... dev.to 위 글 참고했는데 더 좋은 방법이 있으면 댓글로 알려주시길 바랍니다 ㅜㅜ // 업데이트 함수 const UpdateSns = (e, index) => { setUserSns( userSns.map((item, idx) => (idx === index ? e.target.value : item)) ); }; // onChange에 업데이트 함수 넣어주기 {userSns.map((item, idx) => ( Updat.. 2021. 1. 6.
React로 사고하기 ! react.js 의 파일구조를 어떻게 나눠야하는지 고민하다가 react.js 공식 문서에서 하나의 글을 발견했습니다. react로 프로젝트를 개발하며 많은 도움이 될 것 같아 한 번 정리해보려고 합니다. ko.reactjs.org/docs/thinking-in-react.html React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org 목업으로 시작하기 목업(Mock up)이란 프로토타입, 시제품, 견제품과 같은 말입니다. 말그대로 미리 그려보고 시작하라는 것입니다. React 공식 문서의 예시를 가져와 보겠습니다 . JSON API와 목업을 디자이너로부터 받았다고 가정해 봅시다. 밑에 사이트는 다음 프로젝트 .. 2020. 12. 21.
useEffect 사용하다가 무한루프에 빠졌다 ? react-hook 사용하여 프로젝트를 진행 중, 잘 사용하던 useEffect로 인해 무한루프에 빠졌습니다. useEffect(() => { try { const something = {api 데이터 가져오는 코드}; //something은 object if (조건 true) { setOthers(others); setSomething(something); } } catch (error) { ... } }); 대략 이런 코드였는데 구글링을 열심히 해보니 something이 object 타입이라 생긴 문제로 판단했습니다. c언어에서 주소값이 다른 것처럼.... object는 같은 빈 object여도 {} 와 {} 이 다릅니다. 그래서 setSomething으로 something을 계속 업데이트해서 생긴 .. 2020. 12. 3.