[React] Day 2

Day 2

---

리액트가 무엇인지, 어떻게 사용하는지 알았으니깐 본격적으로 써 봅시다!!
(Nomad Coders의 무료 수업인 "React JS로 웹 서비스 만들기" 강좌를 따라가겠습니다.)

함수형 컴포넌트

리액트는 컴포넌트로 구성됩니다. 선언은 자바스크립트와 동일해요.

function App() {
  return (
    <div>
      Hello, React!
    </div>
  );
}

App이란 컴포넌트를 정의했습니다.
이 친구는 하나의 <div> 태그를 리턴해요.

"Hello, React" 부분도 컴포넌트로 구성할 수 있겠죠? 다른 함수를 선언하겠습니다.

function Greeting() {
  return (
    <h1>Hello, React!</h1>
  );
}

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

위, 아래 코드의 결과는 똑같아요. 그렇다면 굳이 분리한 이유가 무엇이냐!!
"React" 문자열을 다른 이름으로 바꾸고 싶기 때문이에요.

props

JSX에서는 컴포넌트에 props를 주면 쉽게 해결할 수 있습니다.

function Greeting(props) {
  console.log(props);
  return <h1>Hello, {props.name}. Your score is {props.score}.</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Python" score="4.7" />
    </div>
  );
}

로그를 찍어보면 다음과 같이 출력돼요.

HTML에서 봤던 거랑 비슷하죠? 이렇게 정보를 넘길 수 있습니다.

Using "map"

만약에 여러 개의 컴포넌트를 출력하고 싶다면 어떻게 해야 할까요?
이름이 다르다면 그 개수만큼 반복해서 작성해야겠죠??.. 상당히 비효율적입니다.

예를 들어 특정 API에서 다음과 같은 정보를 받아왔다고 할게요.

const languages = [
  {
    name: "React",
    score: 4.8
  },
  {
    name: "Python",
    score: 4.7
  },
  {
    name: "C",
    score: 4.5
  }
];

얘를 App 컴포넌트에서 사용하려면 기본적으로 이렇게 쓸 거에요.

function App() {
  return (
    <div>
      <Greeting name={languages[0].name} score={languages[0].score} />
      <Greeting name={languages[1].name} score={languages[1].score} />
      <Greeting name={languages[2].name} score={languages[2].score} />
    </div>
  );
}

인덱스가 3이기 때문에 이 정도로 끝나지만, 엄청난 양의 데이터라고 생각하면 상당히 힘들겠죠?

때문에 우리는 map()을 사용합니다.

map()은 배열의 모든 요소를 돌면서, 주어진 함수의 결과를 모아 새로운 배열로 반환해요.

따라서 저 languages 배열에 Greeing 컴포넌트를 반환하는 함수를 주면 반복을 줄일 수 있겠죠?

function App() {
  return (
    <div>
      {languages.map(data => (
        <Greeting name={data.name} score={data.score} />
      ))}
    </div>
  );
}

languages 배열의 요소를 하나씩 방문 후 Greeting 컴포넌트를 리턴했습니다.
결과는 아래와 같아요.

PropTypes

추가적으로, props가 우리의 의도와 맞는 지 확인할 수 있는 방법이 있습니다.

npm install prop-types

PropTypes는 props의 자료형, 꼭 필요로 한 지를 체크할 수 있어요.
위의 예제에 적용해보도록 하겠습니다.

import PropTypes from "prop-types";

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired
};

위와 같이 작성해주면 자료형 오류 시 콘솔에 에러가 찍히게 됩니다.
실수할 수 있으니 작성하는 습관을 들이면 좋을 것 같아요!!

마무리

오늘은 함수형 컴포넌트와 props에 대해 공부했습니다.

내일은 바로 class형 컴포넌트와 state에 대해 알아보겠습니다!!

감사합니다 😊