[React.js] 컴포넌트(Component)

화면에서 UI 요소를 구성하는 최소단위인 컴포넌트를 배우다.

---

1. 컴포넌트 정의

컴포넌트

컴포넌트는 React에서 자주 사용한다. 반복되는 화면의 큰 틀, 일부분 등을 컴포넌트화 해서 app.js 사용할 수 있다.

---

2. 컴포넌트 사용

2 - 1. 상황

function App() {
  return (
    <div>
      <div className="menu_item">
        <h3>아메리카노</h3>
        <p>3500</p>
      </div>
      <div className="menu_item">
        <h3>아메리카노</h3>
        <p>3500</p>
      </div>
      <div className="menu_item">
        <h3>아메리카노</h3>
        <p>3500</p>
      </div>
    </div>
  );
}

 위 코드를 보면 같은 구조의 코드가 반복되는 것을 볼 수 있다. 이러면 코드가 더러워지고 수정하기 불편하다. 이런 상황에서 컴포넌트를 사용하는 것이다. 

2 - 2. 컴포넌트 파일 생성

컴포넌트 폴더 구조

 컴포넌트파일들은 src 폴더 내에서 components 폴더를  생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다.

단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 대문자로 시작한다. 확장자는 jsx로 사용한다.

 

Test.jsx 기본 구조 생성 명령어

설명을 위해 Test.jsx 컴포넌트 파일을 새로 만들어서 컴포넌트 파일 생성 방법을 설명해 보겠다. 컴포넌트 파일을 기본적으로 함수 형태로 되어있는데 처음에는 텅 빈 파일이다. 하지만 여기서 rafce 명령어를 사용하면

컴포넌트 파일 기본 구조

컴포넌트 파일을 구성하는 기본적인 구조를 만들어준다.

이 명령어를 사용하기 위해서 VS Code의 확장프로램 : ES7 + React/Redux/React-Native v4.4.3을 설치해야 한다.

3. 컴포넌트 문제점(프롭스 사용하기) 및 실습 1

3 - 1. 문제점

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

export default App;

 하지만 컴포넌트를 사용하면 컴포넌트의 데이터가 모두 같아진 채로 그냥 늘어난다는 점이다. 우리가 컴포넌트를 사용하는 이유는 다른 데이터들을 같은 구조에서 사용하고 싶은 것인데 데이터가 똑같으면 아무런 소용이 없다

 

3 - 2. props 정의

function App() {
  return (
    <div>
      <MemberCard where="KIA" name="강병우"/>
      <MemberCard where="SSG" name="김광현"/>
      <MemberCard where="두산" name="김동주"/>
      <MemberCard where="한화" name="문동주"/>
    </div>
  );
}

export default App;

이를 해결해 주기 위해서 props라는 개념이 등장한다. props란 (properties) 속성들을 의미한다. 다시 말해 태그의 속성들을 말하는데 위 코드 블록에서 MemberCard라는 컴포넌트를 사용하고 있다. 각 컴포넌트에 다른 데이터를 주기 위해서 태그에 속성과 속성값을 개발자 임의로 지어줄 수 있다. 현재 App.js는 MemberCard의 부모 컴포넌트이고 MemberCard는 자식 컴포넌트이다. 부모 컴포넌트에서 자식 컴포넌트로 props를 객체형태로 보낸다. 

 

3 - 3. props 그대로 받기

import React from 'react'

const MemberCard = (props) => {
    return (
        <div>
            <div className='member_card'>
                <h3>{props.where}</h3>
                <p>{props.name}</p>
            </div>
        </div>
    )
}

export default MemberCard

그럼 자식 컴포넌트는 함수의 매개변수로 객체형태의 props를 받을 수 있다. 그리고 return안에서 사용하기 위해서 표현식으로 중괄호를 사용해서 객체의 key값으로 value를 꺼내는 방법으로 사용해 주면 된다.

 

3 - 4. 비구조화 할당 방법으로 받기

import React from 'react'

const MemberCard = ({where, name}) => {
    return (
        <div>
            <div className='member_card'>
                <h3>{where}</h3>
                <p>{name}</p>
            </div>
        </div>
    )
}

export default MemberCard

props로 받을 수도 있지만 비구조화 할당으로 객체형태로 넘어오는 props를 같은 key값을 사용해서 각 변수에 value를 넣을 수 있다. 위의 코드에서는 where로 받으면 바로 props.where의 값과 같은 것이다. name도 마찬가지이기 때문에 그대로 표현식에서 사용해 주면 결과는 똑같다.

같은 결과