[React JS] React 입문하기 - 설치, 프로젝트 시작, component, props

리액트 설치하기

리액트를 시작하기 위해서는 node 환경에서 npx를 설치해야 한다. 윈도우의 경우에는 node 공식 홈페이지에서 다운 받을 수 있으며, 맥 환경에서는 홈브류를 통해 쉽게 다운로드 가능하다.(최신 버전을 설치해도 큰 문제는 없으나 버전 호환이 확실하지 않은 경우에는 이미 안정성이 보장된 버전을 특정해 설치도 가능하다.)

$ brew install node@[version]

npm과 npx

npm은 Node Package Manager의 약자로 패키지 관리 매니저이다. 즉 패키지 설치, 저장 등의 관리를 위해 존재한다. 하지만 vue나 react로 프로젝트를 하다 보면 해당 프로젝트에만 적용되는 패키지들을 다운받아 사용하는 경우가 많다.(Django 프로젝트도 마찬가지로 가상환경 실행 후 프로젝트에 맞는 패키지들만 다운받아 사용하는 경우가 많다)

vue cli처럼( npm install -g @vue/cli ) node 설치 이후 전역으로 설치하는 경우도 있지만, 기본적으로 $ npm i 를 통해 해당 프로젝트에서 사용할 패키지들만 관리하는 모습이 그 예라 할 수 있다.

npx는 무엇인가?

패키지가 프로젝트에 필요한 하나의 툴과 같이 되어버린 현 개발 상황에서 업데이트가 빈번히 발생하고 테스트 환경에서만 쓰이는 등 굳이 용량을 써가며 저장해 두어야 할 필요가 없는 패키지들이 발생할 수 있다. 따라서 일일이 설치, 실행, 필요없을 시 제거를 반복하기보단 1회성으로 실행하기 위한 도구가 있으면 좋겠다의 취지에서 나온 것이 ‘npx’ 이다. npm 5버전 이상부터는 npx가 자동으로 지원되나 그렇지 못한 버전의 경우에는 다음과 같이 설치할 수 있다.

$ npm install npx -g

리액트 프로젝트 시작하기

리액트 프로젝트 생성 역시 용량을 차지하며 담아둘 필요 없이 프로젝트 생성 이후 존재할 필요가 없다. 따라서 npx 명령어를 통해 설치 후 자동으로 삭제하면 프로젝트가 생성된다.

$ npx create-react-app [project name]
$ cd [project name]

컴포넌트 이해하기

Vue와 마찬가지로 리액트 역시 기능별로 컴포넌트를 쪼개 UI를 구성할 수 있다. 이때 vue 와의 차이점은 .vue 확장자를 가진 파일로 구성된 컴포넌트와 달리 자바스크립트 파일에 react 패키지를 import해 컴포넌트를 구성한다는 것이다.

import React from "react";, export default Food; 이것을 통해 해당 js 파일이 리액트의 컴포넌트라는 것을 인식할 수 있다.

food.js

import React from "react";

function Food() {
  return (
    <div>
      <h3>i like poatato</h3>
    </div>
  );
}
export default Food;

만들어진 컴포넌트는 다른 컴포넌트에 붙여줌으로써 부모자식 관계를 형성할 수 있다.

app.js

import React from 'react';
import Food from './food'

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <Food/>
    </div>
  )
}

export default App;

props 이해하기

Vue 에서 컴포넌트 간 데이터의 흐름은 props와 emit을 통해 동작하는 모습을 확인했다. 리액트 역시 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내줄 수 있다.

이를 구현하기 위해 다음과 같은 데이터를 만들어 놓았다.

foodLike.js

export default [
  {
    id: 1,
    name: "Kimchi",
    image: "https://mommyson.files.wordpress.com/2013/06/ec9984ec84b1-2.jpg?w=2280&h=2004",
    rate: 5
  },
  {
    id: 2,
    name: "3Gyupsal",
    image: "https://koreanupdatesweb.files.wordpress.com/2015/03/samgyupsal.jpg",
    rate: 4.5
  },
]

이러한 데이터를 app 컴포넌트에서 food 컴포넌트로 보내보자

app.js

import React from 'react';
import Food from './food'
import foodLike from "./foodLike";

const foodIlike = foodLike

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      { foodIlike.map(food =>
        <Food
          key={food.id}
          favorite={food.name}
          rate={food.rate}
          image={food.image}
        />) }
    </div>
  )
}

export default App;

리액트 컴포넌트 파일에서 html 요소들은 return() 안에 담는다. html 요소 안에서 javascript를 쓰고 싶을 경우에는 { } 안에 담을 수 있다. Vue에서 :prpos="props" 를 통해 넘겨줬지만 리액트에서는 props={props} 로 데이터를 넘겨준다. 부모 컴포넌트에서 코드 예시와 같이 4개의 데이터를 넘겨주면 자식 컴포넌트에서는 {key:'key', favorite: 'favorite'....} 와 같은 object로 넘겨받는다.

food.js

import React from "react";

function Food({ favorite, image, rate }) {
  return (
    <div>
      <h3>i like { favorite }!!!</h3>
      <p>rate: {rate}</p>
      <img src={ image } alt={favorite}/>
    </div>
  );
}
export default Food;

부모로부터 object를 넘겨받았기 때문에 자식에서 사용하려면 props.favorite, props.rate 와 같이 읽어올 수 있지만 ES6 문법에서는 가져오고 싶은 것들만 가져올 수 있고 코드 예시와 같이 간편하게 사용이 가능하다.