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
  • props & state를 이용해서 헤더 문구 넣기
  • 영화 데이터 생성
  • 앞으로 작업할 컴포넌트들 미리 만들어놓기

Was this helpful?

  1. 1강

영화 소개 프로젝트: 컴포넌트 작성

JSX, Props, State를 배운 것을 바탕으로 컴포넌트를 작성합니다.

Previousprops & stateNext2강

Last updated 6 years ago

Was this helpful?

props & state를 이용해서 헤더 문구 넣기

방금 전에는 프로젝트를 만들고 간단한 Header 컴포넌트를 생성했었는데, 이번에는 Header에 넣을 문구를 props와 state를 이용해서 만들어 보도록 하겠습니다. Header에 넣을 단순한 문구이기에 state와 props를 꼭 사용할 필요는 없지만, 배운것을 다시 한 번 복습한다고 생각하고 진행하도록 하겠습니다.

지금 생성한 state를 Header 컴포넌트에 넘겨서 Header컴포넌트에 들어갈 문구로써 활용해 보겠습니다.

headerMessage state를 Header컴포넌트에 전달해 주세요.

이제 state를 전달해 주었으니, Header 컴포넌트에서 받는 headerMessage props를 사용해 보도록 하겠습니다.

영화 데이터 생성

앞으로 영화 소개 프로젝트에서 다룰 영화들의 데이터를 state로 정의를 해 놓겠습니다.

앞으로 작업할 컴포넌트들 미리 만들어놓기

사용할 컴포넌트는 총 5개 입니다.

메인 컴포넌트인 App컴포넌트, 헤더 컴포넌트, 영화 데이터를 로딩중일때만 나오는 로딩 컴포넌트, 영화들의 전체적인 데이터를 볼 수 있는 영화 리스트 컴포넌트, 특정 영화의 정보를 자세히 볼 수 있는 컴포넌트 총 5개 입니다. 우선은 이 컴포넌트들을 미리 생성해 놓도록 하겠습니다. (2강에서 진행할 컴포넌트 스타일링을 위함)

만들어야할 컴포넌트 개수가 5개나 되니, src폴더에 담길 파일이 꽤 많아지게 됩니다. 각각의 컴포넌트에 적용할 CSS파일도 필요하니까요. 그렇기 때문에 src폴더 안에 컴포넌트 별로 폴더를 만들어서 관리하도록 하겠습니다.

우선 앞서 만들었던 Header컴포넌트 부터 시작해 볼까요?

그러나 이렇게 폴더를 분리했을 때에, 리액트 코드에 한가지 문제가 발생하게 됩니다.

파일이 없다고 나오네요. 왜 이런 문제가 발생했을까요 ? 그것은 바로 App.js컴포넌트에서 발생한 경로 문제입니다. 이번에도 에러 코드를 잘 읽어보면 쉽게 해결할 수 있는 문제입니다. 파일을 찾을 수가 없다고 나오는데요.

App.js에서 import하고 있는 Header컴포넌트의 경로는 src/header.js 입니다. 하지만 우리는 방금 컴포넌트 경로를 변경시켜 주었기 때문에 App 컴포넌트에서 가리키고 있는 파일은 없어진 체로 남게 됩니다.

App컴포넌트에서 import하고 있는 경로를 바꾸어주면 오류는 해결이 됩니다.

이제 컴포넌트를 본격적으로 생성해 보도록 하겠습니다. 우선은 로딩 컴포넌트 부터 생성해 보도록 하겠습니다.

같은 방법으로 movie-list, movie-specific 컴포넌트를 생성해 주세요.

지금 프로젝트의 모습은 흰 화면에 글자가 몇 개 있을 뿐이지만, 2강에서 컴포넌트 스타일링을 통해서 프로젝트를 예쁘게 꾸밀 것 입니다.

headerMessage라는 state를 만들었습니다.
state 전달
headerMessage Props를 사용해서 Header컴포넌트의 메인 문구로 사용함
App.js에서 생성한 데이터가 Header 컴포넌트에 잘 전달 되었습니다.
header라는 폴더를 만들어 관리를 해 주었습니다.
갑자기 오류가 발생했습니다.
경로를 바꾸어 주면 해결!
로딩 컴포넌트 파일입니다.
폴더 구성 완료