React

React로 영화 웹 서비스 만들기 강의 정리 01

ReactJS Series

React image

리엑트 공부를 시작했다. Javascript 언어를 공부하면서 필수적으로 배우면 좋을 라이브러리 겸 프레임워크라고 생각했다. React 공부를 위해서 node, npm, npx 등등을 설치했다. 그리고 니코쌤이 알려주는 것 처럼 ‘creat-react-app’ 명령어를 쳤다!

영화 관련 정리 앱을 하나 따라 만들면서 react와 익숙해지고자 한다. 다음주에 이머시브를 들어간다. 그전의 솔로위크를 활용하여 나는 React 공부를 선택했다!

컴포넌트와 App.js

컴포넌트는 ReactDom을 렌더링 하는 과정에서 필요한 함수적 요소이다. 말 그대로 HTML을 뱉는 함수라고 할 수 있다. 이것을 App.js 파일에서 각각 만들 수 있다. Html을 JS로 다루는 기술인데, 우리는 이 멋진 기술을 JSX라고 한다.

컴포넌트를 활용해서 만든 JSX의 코드들은 index.html의 root div 아래에 들어가게 된다. 신기하다. App.js 파일에는 기본적으로 App() 이라는 컴포넌트가 있다. 이 메인 컴포넌트 안에 다양한 컴포넌트를 조합할 수 있다.

Movie 컴포넌트 구성하기

대문자로 시작하는 Movie 컴포넌트 함수를 만든다.
JSX로 구성하고자 하는 컴포넌트의 props 들을 정의해준다.
여기서 props는 css 요소로 클래스 등을 지정해주는 것과 방식이 아주 비슷하다.

function Movie({ name, picture, rating }) {
   return <div>
      <h2>I like {name} </h2>
      <p>{rating} / 5.0</p>
      <img src={picture} alt={name}></img>
  </div>
}

위의 Movie 컴포넌트는 name, picture, rating 이라는 props를 가지고 있다. 문자열 리터럴 처럼 처리를 할 수 있고, JSX의 요소마다 원하는 props를 사용한다. 그렇다면 이렇게 만든 컴포넌트를 App 컴포넌트에서 어떻게 사용할 수 있는가?

컴포넌트 사용하기

배열에 들어있는 데이터를 map 메소드를 활용하여 손쉽게 랜더링 할 수 있다.
다양한 방식으로 컴포넌트를 랜더링 가능하다.

const movieILike = [
  // React는 배열에서 객체 데이터의 유일성을 중요시 한다.
  // 그래서 요소별로 차별을 줄 수 있는 id 값을 부여한다.
  {
    id: 1,
    name: 'Star-wars',
    image: 'https://lumiere-a.akamaihd.net/v1/images/star-wars-the-rise-of-skywalker-theatrical-poster-1000_ebc74357.jpeg?region=1%2C318%2C999%2C499&width=960',
    rating: 5
  }
]

function App() {
  return (
    <div>
      {movieILike.map(el => <Movie
        key={el.id}
        name={el.name}
        picture={el.image}
        rating={el.rating} />)}
    </div>

  );
}

export default App;

propTypes를 활용해서 props 검증하기

npm i prop-types 로 설치 가능하다.
내가 사용한 컴포넌트에 props 들을 올바른 양식으로 사용했는지, 정확한 props를 사용했는지 검증해준다.
니코쌤 말로는 아주 유용하다고 한다. 사용은 아래의 코드처럼 할 수 있다.

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
};