JavaScript/React32 [ReactJS_Complete] Child-to-Parent Component Communication (Bottom-up) 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 자식 Component → 부모 Component 데이터 전달 1. 부모 Component에 데이터를 받을 수 있는 함수 생성 및 전달 2. 자식 Component에서 props로 전달받은 후, data를 부모 Component로 전달받은 함수에 주입 결과 - 자식 Component에서 onSaveExpenseData에 인자로 expenseData를 넘겨줌 - 부모 Component에서 선언된 saveExpenseDataHandler에 expenseData를 매개변수로 입력 및 호출 - Console에.. 2023. 5. 28. [ReactJS_Complete] useState() and Object 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. state를 개별적으로 관리 2. state를 Object로 관리 🚨 setUserInput() 시, 최신 입력값으로 모두 업데이트 setUserInput({enteredTitle: event.target.value}); 시, enteredAmount, enteredDate값이 모두 삭제되는 문제 → ... spread operator를 통해 객체 요소 복사 후 변경된 값만 업데이트 필요 3. state를 Object로 관리 + 최신상태 보장 🚨 state update는 바로 이뤄지는 것이 아니라.. 2023. 5. 28. [ReactJS_Complete] React.createElement 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React JSX 문법 : Javascript에 XML을 추가한 확장한 문법으로 React 프로젝트에서만 활성화되는 특수한 비표준 구문 React 객체 활용 ⭐ JSX를 통해 자바스크립트에서 HTML과 비슷하게 코드를 작성할 수 있도록 하여 코드의 가독성을 높일 수 있는 장점이 있음 ⭐ JSX문법에서 return 태그가 최종적으로는 1개만 가능한 이유 : JSX문법에서 2개 이상의 태그로 return 값을 만드는 것 = React 객체 문법 상 return 대상이 2개의 React.createElement() →.. 2023. 5. 27. [ReactJS_Complete] Wrapper Component 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. Component* 중에서 CSS가 중복되는 부분을 추출하여 Wrapper Component로 활용 * Component: 화면에 표시되는 HTML(정확히는 JSX) 코드를 반환하는 JS Function 2. 기존 div wrapper를 Card wrapper로 변경 🚨 Contents가 보이지 않는 문제 발생 3. Card Component의 return에서 사이에 contents가 없으므로 props를 활용하여 내용 추가 children을 활용하여, 안의 Content를 호출 {props.ch.. 2023. 5. 27. [ReactJS_영화_웹] #7 MOVIE APP UPGRADE(DETAIL) 이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 이어진 글: [ReactJS_영화_웹] #7 MOVIE APP UPGRADE(HOME) 기존 Home.js 변경 Home.js - hover event 추가: 포스터 이미지에 마우스 hover 시, 영화 제목 Load 기존 Detail.js 변경 Detail.js - DOWNLOAD Btn에 torrent 파일 경로 데이터 주입 - WATCH NOW Btn에 API 제공 사이트 경로 데이터 주입 Movie.js Movie.module.css Detail.js Detail.module.css 소스 코드 🔗 HJ0216/TIL/REACT 2023. 5. 26. [ReactJS_영화_웹] #7 MOVIE APP UPGRADE(HOME) 이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 이어진 글: [ReactJS_영화_웹] #7 MOVIE APP 기존 Home.js: 왼쪽 화면이 세로로 반복 기존 Detail.js: 오른쪽 화면(영화 제목 클릭 시, 이동) 슬라이드쇼를 만들기 위한 라이브러리 설치 npm i react-slick * 간단한 사용방법은 react-slick 사이트 참조 Neostack The last react carousel you will ever need react-slick.neostack.com 슬라이드쇼가 적용된 Home.js Home.js home.css Movie.js Movie.module.c.. 2023. 5. 22. 이전 1 2 3 4 5 6 다음
