본문 바로가기

react12

Mock Mutate로 API 연동시 코드수정 줄이기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 이전에 한글코딩(링크넣자)으로 서버 API가 늦게 나왔을 때 퍼블리싱 단계에서 고민이 일부 해결되었지만, 또 다른 문제가 생겼습니다.저는 보통 퍼블리싱 단계에서도 API 통신 부분을 제외하고는 각 컴포넌트의 상태 설계와 로직을 대부분 구현해 놓습니다. 단순히 레이아웃과 스타일링만 하는 것 보다 시간은 더 걸리지만 이렇게 했을 때 API연결시 고려할 부분이 확 줄어들기도 하고,디자이너나 PM 분들께 미리 전달하여 기획 요구사항이 명확하게 구현되었는지도 미리 피드백을 받을 수 있습니다. 그러나 실제로 API를 붙여보니 예상보다 API 연결 시간이 훨씬 더 소요되었습니다.이유는 React Query 사용으로 인해 코드 구조가 대부분.. 2024. 10. 1.
컴포넌트를 Props로 넘길 때, Props 제어 따로하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 Icon + Title 로 이루어진, 비슷한 형태의 UI 코드를 작성할 때 종종 배열로 작성합니다.이전까지 저와 팀원 분들의 코드에서 아래와 같은 코드를 종종 볼 수 있었습니다.const iconList = [ { label: '검색', icon: , }, { label: '선물하기', icon: , }, { label: '내정보', icon: , },];  실제로 사용할 때에는 문제가 없는 코드이지만, 같은 Style Props가 중복되었습니다.또한 상수로 배열을 분리했을때, 상태를 전달받기 어렵다는 단점도 있었습니다. 때문에 아래와 같은 방식으로 리팩토링이 가능했습니다.const .. 2024. 10. 1.
[Java Script] 09. 타입 변환과 단축평가 (feat. 옵셔널 체이닝 연산자) ** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다. ** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부정확한 정보전달이 있을 수 있습니다. ** 피드백은 언제나 환영입니다! 1. 타입 변환 타입 변환에 앞서... 이 책 (모던 자바스크립트 Deep Dive) 에서는 타입의 변환 방식에 따라 암묵적 타입 변환과 명시적 타입 변환을 나누고 있습니다. 근데 자세히 보아도 두 타입 변환 방법의 차이를 발견하지 못하였고, 개인적으로 암묵적인 방법보다 명시적으로 타입을 변환하는 것이 오히려 코드에서 목적성이 더 잘 드러나, 코드 가독성이 좋아진다고 생각합니다. 때문에 현재 글 에서는 두 타입 변환 종류에 대해 따로 나누지 않고 타입 변환의 방법만 다루겠습니다. * 참고 타입 변환은.. 2022. 7. 31.
[React] Input: Text 훌륭하게 구현하기 0. 글을 쓰게 된 계기 최근 Test Code 관련 강의를 수강하던 중, 소스코드의 input 이 아래와 같이 구현 된 것을 발견했다. const InputWithRef = () => { const inputRef = useRef(); const addPost = (post) => { // 글 추가하는 함수 } const onSubmit = () => { const { value } = inputRef.current; addPost(value) } return( ) } 코드 자체는 문제가 없는데, 무엇이 문제여서 글을 쓰게 됬을까? 1. 배운거랑 달라요! 정말 이 문제 때문이었다. 조금 더 자세히 말하자면 나는 input창을 useState를 이용하여 구현했는데, 해당 코드에서는 useRef를 이용하여.. 2022. 5. 20.
React + Type Script 로 팝업창 만들기( + Type {children: Element} has no properties )에러 해결방법 최근 프로젝트를 설계하면서 공용 컴포넌트를 어떻게 짜야되는지에 대한 고민이 깊다. 그래도 하나씩 설계하는 가운데, 팝업창 컴포넌트를 만드는 과정과 생긴 오류에 대해 적어보고자 한다. 0. 목표 설정 일단 이런 형태의 팝업창을 만들 예정이다. 안에 들어가는 컨텐츠에 대한 고민은 나중에 하기로 하고, 화면 가운데에 뜨는 하얀 창 + 외부 어두운 창 의 컴포넌트를 만들고 싶었다. 실패기 1. Styled-components로 만들기 사실 이건 볼것도 없이 실패했다. 팝업 창을 만들려면 내부 흰 부분 + 밖 검은 부분 두개의 div 가 필요한데, 재사용성을 위해 두개의 Outer, Inner 를 따로 사용하려면 여간 번거로운게 아니었다. 2. React Components 형태로 제작하여 Element 전달하기.. 2022. 5. 18.
⚛️React hooks + MobX 사용해보기 (1) 최근 리액트를 쓰지 않는 회사에 취직하게 되면서 사용하지 못했던 리액트 공부를 다시 시작했다. 막 공부할때는 Redux를 막 배우고 있었는데, Firebase와 연동할 때 ReduxFirebase라는 모듈을 제대로 사용하지 못해 반포기상태였다. 그러다 MobX라는 상태관리 라이브러리를 접하게 되었는데, 사용은 간단하지만 React hooks에 최신화 된 정보가 없어서 기록해 놔야겠다 생각했다. 🛠️ 사용한 환경 React 16.4.0 Type Script 4.6.3 mobx 6.5.0 mobx-react 7.3.0 ❗ 주의 처음 CRA로 프로젝트를 시작했을 때, React 버전이 18.0.0 이라면 mobx를 지원하지 않을 수 있다. 이럴땐 yarn add 를 통해 설치 해 주거나, React 버전을 낮.. 2022. 4. 3.

티스토리툴바