[DRF / React] 장고 리액트 연동하기 - 5. 리액트 Components 와 Props

시리즈 5번째 글입니다.

이번에는 컴포넌트에 정보를 넘겨주는 방법을 알아볼 예정입니다.

 

https://chanhuiseok.github.io/posts/react-4/

[React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트

https://chanhuiseok.github.io/posts/react-5/

[React] React의 props 설정하기

위 링크를 참조했습니다.

 

Component

시리즈 3강 에서 말씀드렸던 Components 에 대한 개념을 우선 먼저 짚고 넘어갈께요.

컴포넌트는 3강에서 말씀드린대로 리액트를 이루는 최소한의 단위에요.

 

리액트에서 이런 컴포넌트를 만드는 방법은 2가지로 나뉩니다.

• 클래스형 컴포넌트
• 함수형 컴포넌트

이 두가지가 어떻게 다른지 알아볼께요.

 

여기서 잠깐!

아래 각 컴포넌트의 장단점 중 생소한 용어 설명은 프로젝트를 진행해보는데 설명하지 않아도 크게 문제될것 같지 않아 생략하였습니다. 만약 처음 들어보신 용어나 이해가 가지 않는 부분이 있으면 지금 당장은 추가적인 구글링, 혹은 그냥 그렇구나~ 하고 넘겨주시면 좋겠습니다!

 

클래스형 컴포넌트

작성법

import React, { Component } from 'react'

export default class myComponent extends Component {
  render() {
    return (
      <div>myComponent</div>
    )
  }
}

저희가 App.js에서 작성했던 컴포넌트와는 많이 다르죠? 클래스형 컴포넌트는 render 함수를 통해서 JSX를 리턴해주기 때문에 App.js에서 컴포넌트를 가져다 쓸때 Route 의 element 안에도 기존의 함수형과는 다르게 써줘야 합니다!

 

요즘은 공식문서에서도 클래스형 보다 함수형과 Hook을 사용하라고 권장하고 있는 만큼, 잘 사용하지 않는 형태에요.

 

 

장점

• state, lifeCycle 관련 기능 사용 가능(관련 내용을 자세히 알고 싶다면 구글링 해보세요!)
• 임의 메서드 정의 가능

단점

• 메모리 자원을 조금 더 소모
• 조금 더 느림

함수형 컴포넌트

 

import React from 'react'

const Logout = () => {
  return (
    <div>Logout</div>
  )
}

export default Logout

저희가 지금까지 써왔던 함수와는 다른 형태일꺼에요.

 

함수 자체를 저렇게 선언 하는 방법은 화살표 함수 키워드를 구글링 해보는걸 추천드려요!

export default 또한 궁금하시다면 구글링 해보세요!

 

장점

• 클래스형 컴포넌트에 비해서 속도가 미세하게 빠릅니다.
• lifeCycle 또한 Hook으로 대체 가능합니다! (궁금하시다면 구글링~)

 

 

이렇게 함수형 컴포넌트와 클래스형 컴포넌트를 알아 보았습니다!

이제 기존의 컴포넌트들을 각각의 js 파일로 분리하고, 이를 App.js로 적용해보겠습니다!

 

src 폴더 내에 components 폴더를 만들고, 이 안에 아래와 같이 총 5개의 js 파일들을 만들어주세요.

그리고 각각의 파일들마다 함수형 컴포넌트를 작성해 보겠습니다.

 

(코드는 위에 있으니 복붙용으로는 위에껄 사용해주세요)

 

그리고 App.js를 아래와 같이 바꿔주세요!

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Routes} from "react-router-dom";
import Login  from './components/Login';
import Home from './components/Home';
import Signup from './components/Signup';
import Logout from './components/Logout';
import Board from './components/Board';


function App() {
  return(
    <Router>
        <Link to = "/">Home</Link><br/>
        <Link to = "/login">Login</Link><br/>
        <Link to = "/signup">SignUp</Link><br/>
        <Link to = "/logout">LogOut</Link><br/>
        <Link to = "/board">Board</Link>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route path="/login" element={<Login/>}/>
          <Route path="/signup" element={<Signup/>}/>
          <Route path="/logout" element={<Logout/>}/>
          <Route path="/board" element={<Board/>}/>
        </Routes>
    </Router>
  );
}

export default App;

Route 는 바뀌지 않았지만, 위에 Component를 불러오는 코드들이 추가된 걸 볼 수 있어요!

이렇게 각 컴포넌트를 분리된 파일로 작성하면 협업을 진행하기에도, 복잡한 컴포넌트를 따로 보기에도 편하겠죠?

 

Props

위와 같이 만들어진 컴포넌트은 부모 - 자식 관계를 이룰 수도 있어요.

예를 들어 보드 위에 카드가 올라가있는 형태의 웹 페이지에선 보드 컴포넌트가 부모고, 카드 컴포넌트가 자식 컴포넌트라고 할 수 있겠죠

 

 

그럼 이런 부모 컴포넌트에서 자식 컴포넌트에게 정보를 넘겨주고 싶은 상황들이 있을거에요.

예를 들자면 위의 사진과 같이 카드의 색상이라던지, 제목 등을 말이죠

 

이렇게 정보를 넘길때 사용하는 키워드가 props 에요!

위에서 배웠던 클래스형, 함수형 컴포넌트에 이를 전달하는 방법을 전부 알아보진 않을꺼고

함수형 컴포넌트만을 다뤄볼 예정입니다!

클래스형 컴포넌트가 궁금하시다면 구글링!

 

그럼 본격적으로 데이터를 넘겨볼께요. 

 

보드 안에 들어갈 새로운 Card 컴포넌트를 새로 만들어주세요!

자 그리고 이제 함수 선언부의 괄호 안에 props를 넣어주세요.

이렇게 되면, 태그에 붙은 옵션들을 파이썬 딕셔너리 형태와 같이 사용할 수 있게 됩니다!

 

백문이 불여일견이라고, 코드를 통해 보여드리도록 할께요.

 

Board.js

import React from 'react'
import Card from './Card'

const Board = () => {
  return (
    <div>
      Board
      <Card color = "red"/>
      <Card color = "blue"/>
      <Card color = "yellow"/>
      <Card color = "green"/>
    </div>
  )
}

export default Board

Card.js

import React from 'react'

const Card = (props) => {
  return (
    <div> Card : {props.color} </div>
  )
}

export default Card

이후

yarn start

명령어를 실행해 board 컴포넌트로 이동해보면

이런식으로 카드 컴포넌트 안에서 보드가 넘겨준 정보들을 받아온 걸 알 수 있어요

 

비구조화 할당

위에선 정보를 뽑기 위해 props.옵션이름 형태를 사용했습니다!

여기서 ES6 의 비구조화 할당이라는 기능을 활용하면 props를 제거하고 사용할수도 있다고 하는데요, 그 두가지 단계를 살펴보도록 하겠습니다!

 

1단계. 내부에서 받기

import React from 'react'

const Card = (props) => {
  const {color} = props;
  return (
    <div>Card : {color} </div>
  )
}

export default Card

보이시나요? props.color를 사용하는게 아니라 새로 선언한 color 변수에 props.color 값이 비구조화 할당되어 이를 사용할 수 있게 되었습니다.

이를 더 줄이면 매개변수 위치부터 줄일 수 있는데요,

 

2단계. 매개변수부터 받기

import React from 'react'

const Card = ({color}) => {
  return (
    <div>Card : {color} </div>
  )
}

export default Card

이런 식으로 받아올 수 있답니다!

 

 

이번 포스팅에선 컴포넌트의 종류와 분리 방법, 그리고 컴포넌트에 정보를 전달하는 방법을 알아보았습니다!

다음 포스팅에선 로그인창을 위한 Form 과 Input Box를 구현해 보도록 하겠습니다.