Dev Diary 💻

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 108. 모듈 소개 JSX Limitations & Fragments Getting a Cleaner DOM with Portals Working with Refs 109. JSX 제한 사항 및 해결 방법 반환하거나 상수에 저장하는 값은 하나여야 한다. 1. div tag 사용하기 return ( {error && ( )} Username Age (Years) Add User 2. 네이티브 JS array 사용하기 return [ error && ( ), Username Age (Years) Add User , ]; → 배열을 반환할 수 있는 이유는 리액트 JSX 요..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 82. 모듈 소개 Conditional & Dynamic Styles Styled Components CSS Modules error error:03000086:digital envelope routines::initialization error 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 83. 동적 인라인 스타일 설정하기 input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. Course Goal 하지만 inline 스타일은..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 67. 모듈 소개 Outputting Dynamic Lists Of Content Rendering Contend Under Certain Conditions 68. 데이터와 렌더링 목록 JSX 코드에서 map 함수를 사용하여 동적인 구문을 실행해보도록 하자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map return ( {props.items.map((expense) => ( ))} {/* */} ); 69. State 저장 목록 사용 초기 expenses ..