React JS _ JSX & Props

#2.0 ~ #2.4

아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. Component

component는 HTML을 반환하는 함수이다. 아래 코드에서<App />이 component의 형태이며, 이것이 component를 사용하는 방법이다. 리액트는 component와 함께 동작하며 모든 것은 component로 이루어져 있으므로 component를 빼고 리액트를 설명할 수는 없다. 아래 코드는 index.html 파일의 root element에 App component를 넣겠다는 뜻이다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

 

component는 클래스 component와 함수 component가 있다. 코드상의 component는 함수 component이다. 그렇다면 각각의 component를 어떻게 만들까? 우선 함수 컴포넌트를 만드는 과정을 보자.

 

1. scr 파일 안에 js 파일을 만든다.

2. react를 import 한다. (파일에서 JSX를 사용하려면 꼭 React를 import 해야 한다.)

3. 함수를 만들고 return 값을 준다. (단, 함수 이름은 대문자로 시작해야 한다.)

4. 만든 component를 export 한다. 

//App.js
import React from 'react';

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

export default App;

 

위 코드는 App 이라는 component를 만든 것이다. 코드를 보며 리액트의 동작 과정을 살펴보면, index.js 파일에서 <App /> 의 형식으로 component를 랜더링한다. 이 파일에서 component 랜더링을 통해 브라우저 상에서 내가 만든 리액트 component를 보여준다. App.js 파일에서 App 함수(이하 컴포넌트)의 return 값을 보면, html 형식임을 알 수 있다. 이곳에서 작성된 내용이 브라우저에 나타난다. 컴포넌트를 export 해서 index.js 파일에서 이를 받아(import) 랜더링하여 브라우저에 보여줄 수 있는 것이다. 

 

추가적으로 리액트 어플리케이션(index.js)은 하나의 component만을 랜더링해야 한다. index.js 파일에서 <App /> <Potato /> 와 같이 여러 개의 component를 랜더링 할 수 없다. App.js 안에는 여러 component를 넣을 수 있다.

 

동작방식에 대한 것은 대충 이해만 했지, 개념의 완벽한 이해가 부족해 정확한 워딩으로 서술이 잘 안되는 것 같다. 이후 공부를 더 진행한 다음 다시 돌아와 수정할 예정이다. 

 

 

2. JSX & Props

리액트의 동작 방식에서 언급했던 javascript(component)와 html 사이의 조합(관계?)을 JSX라 부른다. JSX는 Javascript 안의 HTML이다. 이는 리액트에 특화된 개념으로, component를 만들고 어떻게 사용하는지에 대한 것을 의미한다. 

 

JSX는 component에 정보를 보낼 수 있다. component에서 component로, 부모 component에서 자식 component로 data를 보낼 수 있다. 여기서 Props라는 개념이 등장한다. Props는 부모 component가 자식 component에게 주는 값으로 자식 component에서 수정할 수 없는 값이다.

 

ex) App component(부모 컴포넌트)가 Food component(자식 컴포넌트)로 name이라는 이름의 property(이하 props)를 kimchi라는 value로 data를 보낸다. -> Food component에서 props를 인자로 받아 사용한다.

import React from 'react';

function Food(props) {
  return <h1> I like {props.foodName}</h1>;
}

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

export default App;

 

props를 동적으로 다루기 위해 map을 이용할 것이다. map은 함수를 인자로 받아 이 함수를 배열의 각 item에 적용한 다음, 연산의 결과 값을 배열로 반환하는 javascript의 개념이다. 

 

ex) foodILike는 데이터를 담은 배열이다. 데이터는 각각 id, name, image를 가지는 객체의 배열이다. App component에서 map을 이용해 데이터를 담은 배열을 동적으로 전달해 준다. id가 있는 이유는 오류를 방지하기 위해서이다. 리액트의 모든 element는 유일해야 하기 때문에 각 item에 id를 달아준 것이다. ket는 리액트 내부에서 사용하기 떄문에 Food component에 인자로 받을 필요가 없다.

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

function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food 
          key={dish.id} 
          name={dish.name}
          picture={dish.image}
        />
      ))}
    </div>
  );
}

 

Props를 보다 정확하게 사용하기 위해 props를 체크하는 것이 필요하다. 사용하려는 props(전달받은 props)가 내가 원하는(예상한) props가 맞는지 체크해야 한다. 실수를 알려준다고 생각하면 된다. 이를 체크하기 위해서는 prop-types이라는 것을 설치해야 한다. (설치방법: npm i prop-types).

 

ex) prop-types를 사용하기 위해 import를 하고, Food의 props 대한 설명을 써놓고 실수가 발생했을 때(원하던 props가 아닐 때) 콘솔창에서 에러를 통해 알려준다. name의 경우, props가 string이어야 하며 반드시 있어야 한다라는 의미를 가진다. 

import PropTypes from "prop-types";

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