Library/React

• 프로젝트에 타입스크립트와 스토리북 적용하기

  Library/React 2024. 4. 14. 23:48

  타입스크립트 기존의 CRA 프로젝트에 타입스크립트를 적용해보자. yarn add --dev typescript @types/react @types/react-dom tsc --init 1. yarn 패키지 매니저를 사용해서 타입스크립트 의존성을 추가하고 패키지를 설치한다. 2. 프로젝트에 대한 초기 TypeScript 설정 파일(tsconfig.json)을 생성한다. 3. tsconfig.json 파일이 추가되었다면 기존의 jsconfig.json 파일은 삭제한다. 스토리북 https://storybook.js.org/docs/get-started/install Install Storybook • Storybook docs Storybook is a frontend workshop for buildin..

  Read More
• React 개발을 해야하는데 말이야, 어떻게 시작하면 되는건데?

  Library/React 2024. 2. 3. 13:49

  Vue ➔ React 마이그레이션 시작하기 기존에도 리액트를 조금씩 공부하긴 했지만 넥스트와 타입스크립트까지는 아니었다. 그런데 사내 이커머스 솔루션의 프론트엔드가 vue에서 react로 마이그레이션을 진행하면서 급하게 범위를 넓혀 공부를 하게 되었다. 공부 기간은 약 2-3주로 여유가 있지는 않고 지금도 스토리보드를 보면서 어떻게 개발을 하면 좋을지 감을 잡아가고 있는 단계이다. 지난번 NextJS의 앱 라우터 방식을 살짝 맛봤었는데, 사실 이것도 프로젝트에 적용할 예정이기 때문에 공식 문서를 참고했었다는 사실. 그래서 오늘 정리해볼 내용은 '스토리보드와 화면을 봤는데, 어떻게 시작하면 좋을까?'에 대한 내용이다. 정답은 없으니 참고만 하시고, 혹시 더 좋은 제안이 있다면 댓글로 남겨주시길... Vue..

  Read More
• React #3 리액트 Hooks - useMemo와 useCallback

  Library/React 2023. 8. 25. 10:54

  React Hooks hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 리액트에서 기존에 사용하던 class를 이용한 코드를 작성할 필요 없이, 여러 리액트 기능을 사용할 수 있도록 만든 라이브러리이다. 가장 기본적인 함수는 useState이며 리액트의 함수 컴포넌트에서 상태 관리를 할 수 있도록 해준다. import { useState } from 'react'; const test = () => { // testVal: 변수명 // setTestVal: testVal 값 set // 0: 초기값 const [testVal, setTestVal] = useState(0); return ( 현재 값 : {value} setTestVa..

  Read More
• React #2 React Router 중첩경로

  Library/React 2023. 8. 15. 09:32

  HTML 구조 설계 시에 아래와 같이 header, aside, footer 는 공통으로 사용하고 section 영역의 콘텐츠만 변경하도록 하고 싶은 경우가 있다. 혹은 사이드에 메뉴바를 고정적으로 위치시키고 그 외의 공간을 콘텐츠 영역으로 사용하고자 하는 경우 thymeleaf layout 기능을 사용했었다. React 에서는 이런 화면을 구성하려고 할 때 React Router의 Outlet을 활용할 수 있다. Outlet은 React Router v6에서 도입된 개념으로, 중첩된 경로를 다루는데 사용되는 기능이다. import { BrowserRouter, Route, Routes, Outlet } from 'react-router-dom'; const App = () => ( ); const Pa..

  Read More
• React #1 컴포넌트의 라이프사이클 메서드

  Library/React 2023. 7. 13. 22:42

  리액트를 다루는 기술 7장 컴포넌트의 라이프사이클 메서드 3회독 중인 '리액트를 다루는 기술'. 책 후반에도 componentDidMount는 반복적으로 언급되어 기본적인 라이프사이클을 확실히 알고 가야하는 필요성을 느꼈다. 그래서 정리해보는 컴포넌트의 라이프사이클 메서드. 라이프사이클 메서드의 종류는 총 아홉 가지이다. Will 접두사가 붙은 메서드는 어떤 작업 전에 실행되는 메서드. Did 접두사가 붙은 메서드는 어떤 작업 후에 실행되는 메서드. 명칭의 접두사로 어느정도 예상할 수 있는데 will, did 용어로 인해서 약간 헷갈렸다. 그래서 will은 'will + 작업'이기 때문에 '이거 후에 작업할거야' 라고 외웠고 did는 그 반대로 생각했다. 라이프사이클은 마운트, 업데이트, 언마운트 세 카..

  Read More