728x90 frontend/React12 [React] React 프로젝트 개발 정책 만들기 개요생산성 없이 비즈니스와 레이아웃이 같이 존재하는 컴포넌트는 코드 병목현상이 자주 발생할 수 있다.안정적인 개발과 생산성을 위해서라도 정확한 정책을 두고 구분하는 것이 좋다. 환경 설계디렉토리 정의public프로젝트의 index.html 파일srcsource의 약자프로젝트를 구성하는데 필요한 html, css, js 디렉토리 정책pages 정책한 폴더에 10개이상의 파일을 두지 않는다.app router vs page router 형식으로 폴더 뎁스 구축 src/components, hooks 정책비즈니스 로직이 있는경우는 hook으로 개발하는것이 좋다.간단한 state 저장 로직이라도 hook으로 구분하기 디렉토리 예) 컴포넌트 디자인 패턴1. Atomic Design- 컴포넌트가 많아졌을 때 계층.. 2024. 1. 26. [React] React 로컬/전역 상태 관리 - React Hook(useState), React Store(Redux) 개요React 애플리케이션에서 상태 관리는 컴포넌트 간의 데이터 흐름과 로직을 관리하는 데 핵심적인 역할을 합니다.React Store와 다양한 Hook을 활용하면 효율적으로 상태를 관리할 수 있습니다. 이번 포스팅에서는 React Store와 Hook의 개념, 그리고 상태 관리의 최적화를 위한 방법을 정리합니다. React Hook이란?React Hook은 함수형 컴포넌트에서 상태와 생명주기 메서드를 활용할 수 있게 도와주는 API입니다. useState역할: 컴포넌트 내에서 상태(state)를 관리.제한: 컴포넌트 내부에서만 사용 가능하며, 다른 컴포넌트와 상태를 공유할 수 없음.저장 방법: setState 메서드를 통해 상태 업데이트.저장 위치: 컴포넌트의 로컬 state에 저장.import Rea.. 2024. 1. 24. [React] TypeError: Cannot read property 'map' of undefined 발생 이유 - .map(...) 실행 시 앞 데이터가 없어서 나는 타입 오류 - array.map() 인경우 array를 확인해보면 undefined으로 되어 있을 것이다. 해결 방법 1. 렌더링 상태에서 return 할 경우 && 을 사용하여 값 여부를 체크한다. import React from 'react'; const UserList = () => { ... return ( {dataList && dataList.map((item, index) => ( {item.name} ))} ); }; 2. 스크립트에서 return 할 경우 if 문을 사용하여 값 체크를 해준다. import React from 'react'; const UserList = () => { if(dataList){ const r.. 2024. 1. 3. 이전 1 2 다음 728x90
