React
  • 리액트 강의
  • * 강의 수강 전 준비 (중요)
  • 기본 개념
    • Node.js & npm
    • npm과 npx의 차이에 대해서
    • Babel
    • Bundler
    • Class
    • this
    • import, export에 관해서
    • Arrow function
    • Map
  • 1강
    • React가 뭐야?
    • 리액트를 왜 배우니 ?
    • CRA를 활용한 리액트 앱 만들기
    • 태초에 DOM이 있었다.
    • React에는 HTML이 없나요 ?
    • Component Of React
    • 영화 소개 프로젝트: 프로젝트 생성
    • JSX
    • props & state
    • 영화 소개 프로젝트: 컴포넌트 작성
  • 2강
    • 라이프사이클
      • 라이프 사이클이 뭔데?
      • render
      • componentDidMount
      • componentDidUpdate
      • componentWillUnmount
      • 라이프 사이클의 동작
    • 리액트의 스타일링
      • Pure css
      • SCSS
      • Styled-components
    • 영화 소개 프로젝트: SCSS, Styled-component
    • 영화 소개 프로젝트: 외부 라이브러리 사용해보기
    • LifeCycle Of React component - Deprecated
    • Optimizing of component - Deprecated
    • scss note - Deprecated
  • 3강
    • props 에러 관리
      • defaultProps
      • prop-types
      • 그냥 타입스크립트 쓰세요
    • Routing (준비)
    • Routing (실전)
    • history를 이용한 뒤로 가기 버튼 구현
    • 영화 소개 프로젝트: 라우팅
    • 한국 전통 음식 소개 페이지 만들기 - Deprecated
  • 4강
    • Ajax In React
    • Form in react
    • Unsplash API를 이용한 사진첩 만들기
    • Redux - 데이터를 관리하는 또 다른 방법 - Deprecated
  • 부록
    • CRA 프록시 서버 설정하는 방법
Powered by GitBook
On this page

Was this helpful?

  1. 1강

영화 소개 프로젝트: 프로젝트 생성

Component of React 강의 복습 + 영화 소개 프로젝트 컴포넌트 생성

PreviousComponent Of ReactNextJSX

Last updated 6 years ago

Was this helpful?

지금까지 배웠던 내용을 바탕으로 프로젝트를 생성하고 컴포넌트를 만들어 보도록 하겠습니다.

먼저, 새로운 터미널을 열어주세요. 처음에 했던 데로 같은 명령어를 사용해서 프로젝트를 생성해 보도록 하겠습니다. 터미널에 다음과 같은 명령어를 입력해 주세요.

npx create-react-app movie-project

프로젝트 구조 잡기

우선 처음에 배웠던 데로 사용하지 않을 파일들은 지워주도록 하겠습니다. 폴더 구조를 다음과 같이 잡아 주세요.

그 후, index.js와 App.js에 있는 모듈 간 import 관계도 정리해 주세요. 아직 저 파일들에서는 우리가 삭제한 파일들을 불러와 사용하고 있습니다.

파일의 관계를 정리해 주었습니다. 그럼 우선은 컴포넌트 생성을 해 봐야겠죠? 아직 컴포넌트 안에 있는 문법에 관해서는 생각하지 않으셔도 됩니다. 우선 앞서 배운 컴포넌트를 만들어 보도록 하겠습니다. 그런데 이번에는 App.js라는 파일 하나에 컴포넌트를 만드는 것이 아닌, 다른 자바스크립트 파일을 만들어 그 안에 컴포넌트를 만들어 보는 실습을 해 보도록 하겠습니다. 영화 소개 페이지 홈페이지의 헤더 부분의 컴포넌트를 생성하겠습니다.

헤더 컴포넌트에서는 일반적인 웹 사이트의 헤더 컴포넌트에서 하는 기능과 같이, 메인 소개 문구, 메뉴 정도를 넣도록 하겠습니다.

이제 처음부터 헤더 컴포넌트를 만들어 보도록 해보겠습니다.

다음은 만든 Header 컴포넌트를 App.js에 넣어 보겠습니다.

(전 파일에서 export default를 해주기 때문에, 꼭 Header라는 이름으로 import를 해줄 필요는 없습니다.)

앞으로 영화 프로젝트에서 이와 같은 컴포넌트를 3개 4개 정도를 만들어 볼 예정인데, 다음에 만든 컴포넌트들은 JSX문법을 실습한 뒤에 작성해 보도록 하겠습니다 !

어떤 파일을 import 하거나 export 하는 방법에 대해서 아직 감이 잡히지 않는다면 이 를 참조해 주세요.

그냥 단순한 컴포넌트 입니다. 모든 리액트 컴포넌트의 시작은 이렇습니다. 클래스 문법에 관해서 이해를 하고 있다면 정말 쉽게 넘어갈 수 있습니다. (클래스 문법이 아직 익숙하지 않다면를 참고)

링크
여기
프로젝트를 생성해 보도록 하겠습니다.
프로젝트를 생성했습니다.
src에 있는 사용하지 않을 파일을 삭제
index.js
App.js
header.js 파일 생성
우선은 리액트 파일을 import 해야 합니다. 리액트 컴포넌트를 만들 테니까요.
헤더 컴포넌트 완성
Header 컴포넌트를 App.js에 넣어 주었습니다.