전체 글102 20231113 퇴근 전 TIL - 플젝에서 Modal을 전역으로 빼서 만들어두었다. 컴포넌트마다 에 접근할 수 있고, 해당 컴포넌트에 모달을 여는데에 필요한 것들을 Props로 넘겨주는 형태. 이때 를 모달을 열고싶은 컴포넌트마다 모두 작성해두었음 -> 불필요한 중복이며, 실수로 깜빡하고 를 기재하지 않은 경우 모달이 뜨지 않는 문제를 트래킹하기 어려울 수 있음. -> 다른 프로젝트 폴더를 보니, App.tsx에 를 써둔 걸 보고 "아.. 이렇게 해야하는거구나!" 하고 코드를 수정했다. => 이렇게 모달을 전역으로 관리할 수 있게 뺐다면 그 이점을 누리기 위해 꼭 최상위 컴포넌트에서 렌더링해줄 것! 유지보수, 모달 추가로 붙이기에도 더욱 간편해진다. - 드래그앤드롭으로 순서변경하는 기능을 구현하고 있다. 우선 화면단은 구현해두었고, .. 2023. 11. 13. 20231109 퇴근 전 TIL 이전에 온보딩 과제삼아 구현했던 어드민의 공지사항 관리 페이지에서 미처 생각하지 못했던 케이스가 발견되었다. 등록되어있는 공지사항을 여러 검색 필터 (제목, 내용 / 언어 / 검색어 등) 로 검색을 할 수 있는데, NoticeFilter NoticeTable 이 두 가지 컴포넌트로 나뉘어 있다. 그 중, NoticeFilter에서 선택한 검색 필터의 값을 Recoil을 이용해 전역상태로 관리하고, 검색 버튼 클릭 시 이를 서치 쿼리에 전달해 검색 네트워크 요청이 이루어지는 방식이다. 그런데, 전역상태로 검색 필터 값들 중 몇몇을 저장하다보니, 유저의 사용감을 해칠 수 있는 케이스가 발견되었다. 유저가 검색 필터를 이용해 검색을 하고 난 후, 다른 페이지를 돌아다니다가 다시 공지사항 조회 페이지로 접속한다.. 2023. 11. 9. React setState를 작성하는 방법들 리액트는 배우면 배울수록 같은 내용도 새롭게 다가오는 듯 하다. 오늘은 리액트 공식문서(해당부분)에서 setState를 사용하는 방법 두가지에 대해 학습했다. 1. pass the next state directly function handleClick() { setAge(age + 1); // setAge(42 + 1) setAge(age + 1); // setAge(42 + 1) setAge(age + 1); // setAge(42 + 1) } // 변경된 age는 다음 렌더링부터 반영되므로, age는 계속 42의 값을 갖는다. 2. pass a function that calculates it from the previous state function handleClick() { setAge(a =.. 2023. 7. 21. React로 생각하기 (Feat. 공식문서) - 리액트로 프로젝트를 구현하면서 state를 남발하는 요즘... 이게 맞는건가? 라는 찝찝함이 남아 공식문서의 'React로 생각하기' 파트를 다시 읽어보았다. 처음 배울 때도 이 챕터를 읽기는 했지만, 지금 읽으면 또 다를 것이 분명하기때문에 ㅋㅋㅋㅋ 다시 정독 ㄱ ㄱ ! - 요즘 단순히 구현만 짠! 해내면 되는게 아니고, 정확한 용법으로 기능들을 사용하고 코드를 짜는 것은 더 많은 공부와 노력을 들여야 하는 일임을 절실히 느낀다. 돌아가기만 하면 되는 코드를 짜고 만족하지 말자! 그리고 꼭 꼭 공식문서를 더 많이, 더 자주 읽자. 이에 기반해서 내가 제대로 코드를 짜고 있는지 점검하는 습관을 들이자! 이 문서 (구버전) 다. 1. UI를 컴포넌트 계층 구조로 나누기 - 모든 컴포넌트의 주변에 박스를.. 2023. 7. 14. 이전 1 2 3 4 5 6 ··· 26 다음