개발 메모장 개발 메모장

리액트

• React useEffect vs useLayoutEffect 차이점 알아보기

  React 2022. 12. 15. 16:29

  React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..

  Read More
• React 디자인패턴

  React 2022. 10. 7. 15:30

  1. Data 관점1. MVC제작시기 : 1979.12.10제작회사 : XEROX PARC제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.특징ModelViewController로 구성됩니다.Model : 순수 데이터 모음입니다.View : 시각적 요소로 Model에 데이터를 요청합니다.Controller : 사용자와의 상호작용을 담당합니다.2. MVVM제작시기 : 2005.10.08제작회사 : Microsoft제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.특징ModelViewViewModel로 구성됩니다.Model, View : MVC에서와 동일합니다.ViewModel : Controller에서 좀 더 UI 측면으로..

  Read More
• React 유용한 Tip 3가지 모음

  Tip 2022. 1. 18. 14:36

  1. React props 간편하게 전달하기 react의 compoent를 생성한 뒤 props를 전달하다 보면 반복된 내용을 쓰게 되는 경우가 많다. const {title, name, contnets} = data; const onOtherNameFunc = () => alert('Click!'); // bad // good 2. Map props 효율적으로 전달하기 map을 사용할 때 하나의 id와 같은 하나의 props를 위해 구조 분해 할당을 하기에는 번거로울 때가 있다. // bad {list.map((data) => ( ))} // good {list.map(({ id, ...listData }) => ( ))} 3. 객체나 배열에 조건부 할당하기 객체나 배열을 생성할 때 한 가지 정도가 조..

  Read More
• ESLint react/display-name 해결하기

  Tip 2021. 9. 2. 12:11

  해당 에러는 의외로 많은 곳에서 볼 수 있고 Google에서 코드를 참고하다 보면 자주 겪게 되는 에러입니다. 익명 함수를 사용해서 발생하는 에러로 주로 아래와 같은 경우 많이 발생한다. { ... component: ({size, color}) => , ... } 위와 같은 코드는 꽤나 자주 사용되는데 해당 코드를 const renderComponent = ({size, color}) => { ... component: renderComponent, ... } 아래와 같이 함수를 외부로 빼서 작성하게 되면 해결할 수 있다. 물론 TS를 적용하면 문제가 발생하는 경우가 있다. 위와 같은 경우에는 interface IProps { size: string; color: string; } const rende..

  Read More
• Styled-Components 테마 적용하기

  React 2021. 7. 30. 19:37

  npm install styled-components 만약 TS를 사용한다면 추가적으로 Types를 설치해 준다. // react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native 아래부터는 TS로 설명하겠습니다. TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다. // styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string;..

  Read More
• NextJS에서 antd less파일 이용하기

  Next.js 2021. 7. 27. 17:13

  NextJS 11 버전으로 변경되며 기존에 사용하던 @zeit/next-less를 사용한 Webpack Config코드에 문제가 생겼다. 이에 대한 해결 방법을 공유한다. 먼저 종속성을 다운 받아준다. npm i antd next-plugin-antd-less less less-loader 그런 뒤 파일들을 수정해 준다. //next.config.js const withAntdLess = require('next-plugin-antd-less'); module.exports = withAntdLess({ lessVarsFilePath: './styles/custom.less', lessVarsFilePathAppendToEndOfContent: true, cssLoaderOptions: {}, webpa..

  Read More
• 앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들)

  React Native 2021. 7. 22. 17:15

  해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 전 글에서 프로젝트를 생성하는 것 까지 끝냈다. 오늘은 개발을 할 때(특히 협업을 할 때) 거의 필수적으로 사용하는 설정들에 대해 다뤄보고자 한다. 일단 나 같은 경우 React Native 프로젝트의 경우 특히 내가 사용하는 파일 이외에 생성되는 파일들이 많기에 src 폴더를 만든 뒤 위치를 변경해준다. src 폴더로 App.tsx를 이동했을 경우 꼭 index.js파일의 App.js의 import 위치를 변경해 주세요. 그런 뒤 expo로 편하게 이용하기 위해 android, ios의 스크립트를 변경한다. "android": "expo start --android", "ios": "exp..

  Read More
• 앱 기획부터 출시까지(일기장) - 1 (사용 기술 정하기 및 프로젝트 생성)

  React Native 2021. 7. 21. 14:40

  +해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 이미 카테고리를 보면 알겠지만 가장 큰 틀은 React Native로 정한 상태로 들어간 프로젝트이다. 하지만, 이에 대한 설명 역시 필요하다는 생각에 처음 기획을 한 단계부터 시작하려고 한다. React, React Native 두 가지 모두 Facebook에서 만든 JS 라이브러리로 두 가지 중 어떤 걸 선택하는지에 대한 내 기준은 사실 한 가지이다. 검색이 용이해야 하는가? 이 한 가지에 따라 웹으로 프로젝트를 시작할지 앱으로 시작할지를 정하는 편이다. 그리고 이번에 할 프로젝트의 경우 일기장의 특성상 검색이 될 일이 없었기에 React Native로 정할 수 있었다. 이 시점에서 내..

  Read More