이모저모 개발 블로그

이 글은 [[한글자막] 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()

→ return 값이 1개인 js문법 위배

참고 자료

이 글은 [[한글자막] 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에서 <div></div> 사이에 contents가 없으므로 props를 활용하여 내용 추가

children을 활용하여, <Card></Card> 안의 Content를 호출

{props.children}

🚨 CSS가 깨지는 문제 발생

4. className을 활용하여 CSS 고치기

화면에 load된 코드를 확인해보면, Card component로 감싸진 이후 className이 card로 변경되었음

→ className 변경에 따른 CSS 깨짐

→ className card에 기존 className 추가

⭐ Card Component에 값을 전달하지 않아도 props를 사용할 수 있는 이유

 React는 컴포넌트를 생성하고 렌더링할 때 해당 컴포넌트에 전달된 속성들을 객체 형태로 props 변수에 자동으로 전달
 = ExpenseItem component를 객체 형태의 props로 Card component에 전달

5. 결과

이 글은 노마드코더의 [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

이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다.

⚛️ 기본 환경: IDE: VS code, Language: React

이어진 글: [ReactJS_영화_웹] #7 MOVIE APP

기존 Home.js: 왼쪽 화면이 세로로 반복 

기존 Detail.js: 오른쪽 화면(영화 제목 클릭 시, 이동)

슬라이드쇼를 만들기 위한 라이브러리 설치

npm i react-slick

* 간단한 사용방법은 react-slick 사이트 참조

슬라이드쇼가 적용된 Home.js

Home.js

home.css

Movie.js

Movie.module.css

소스 코드

🔗 HJ0216/TIL/REACT

참고 자료

이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다.

⚛️ 기본 환경: IDE: VS code, Language: React

MovieApp.js

Home.js

Movie.js

Detail.js

소스 코드

🔗 HJ0216/TIL/REACT