[우아한 테크러닝] React&TypeScript 4회차(1) - React 함수 컴포넌트 상태와 컴포넌트 분리

컴포넌트 분리

좋은 코드를 만드는 방법은 쪼개는 것이다.
코드를 쪼개 단위 단위의 컴포넌트로 만들면 가시성이 좋아진다.

가장 기본적인 형태의 React 애플리케이션이다.

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

• App.js

import React from "react";

const App = () => {
  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <ul>
          <li>1회차: Overview</li>
          <li>2회차: Redux 만들기</li>
          <li>3회차: React 만들기</li>
          <li>4회차: 컴포넌트 디자인 및 비동기</li>
      </ul>
    </div>
  );
}

export default App;

1차 분리

ul > li 태그를 배열로 만들어 store이라는 변수에 담아 App.js에 전달한다.
App.js는 받은 배열을 map 함수로 돌리며 html 코드 안에 넣어준다.

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

const sessionList = [
  { title: '1회차: Overview' },
  { title: '2회차: Redux 만들기' },
  { title: '3회차: React 만들기' },
  { title: '4회차: 컴포넌트 디자인 및 비동기' }
];

ReactDOM.render(
  <React.StrictMode>
    <App store={{sessionList}}/>
  </React.StrictMode>,
  rootElement
);

• App.js

import React from "react";

const App = (props) => {
  const { sessionList } = props.store;

  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      {sessionList.map((session) => (
        <li>{session.title}</li>
      ))}
    </div>
  );
}

export default App;

2차 분리

하지만 li 태그를 반환하는 코드가 많아질 경우 가독성을 해칠 수 있어 한번 더 분리한다.
이때, SessionItem과 App 은 상태를 가지고 있지 않은 함수이다.

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

const sessionList = [
  { title: '1회차: Overview' },
  { title: '2회차: Redux 만들기' },
  { title: '3회차: React 만들기' },
  { title: '4회차: 컴포넌트 디자인 및 비동기' }
];

ReactDOM.render(
  <React.StrictMode>
    <App store={{sessionList}}/>
  </React.StrictMode>,
  rootElement
);

• App.js

import React from "react";

const SessionItem = ({ title }) => <li>{title}</li>;

const App = (props) => {
  const { sessionList } = props.store;

  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      {sessionList.map((session) => (
        <SessionItem title={session.title} />
      ))}
    </div>
  );
}

export default App;

컴포넌트 상태

재정렬 버튼을 눌러 오름차순, 내림차순을 변경하는 코드를 작성해보자.

import React from "react";

const SessionItem = ({ title }) => <li>{title}</li>;

const App = (props) => {
  let displayOrder = 'ASC';
  const { sessionList } = props.store;
  const orderSessionList = sessionList.map((session, i) => ({
    ...session,
    order: i
  }));

  const toggleDisplayOrder = () => {
    displayOrder = displayOrder === "ASC" ? "DESC" : "ASC";
  };
  
  console.log(displayOrder);

  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <button onClick={toggleDisplayOrder}>재정렬</button>
      {orderSessionList.map((session) => (
        <SessionItem key={session.id} title={session.title} />
      ))}
    </div>
  );
}

export default App;

위 코드는 '재정렬' 버튼을 아무리 눌러도 displayOrder 값은 변하지 않으며 재랜더링도 되지 않는다.

지난 강의에서 공부했던 함수형 컴포넌트의 '상태' 때문이다.
React 함수 컴포넌트에서 상태를 다루기 위해서는 useState라는 Hook을 사용한다.

import React, { useState } from "react";

const SessionItem = ({ title }) => <li>{title}</li>;

const App = (props) => {
  let [ displayOrder, setDisplayOrder ]  = useState('ASC');
  const { sessionList } = props.store;
  const orderSessionList = sessionList.map((session, i) => ({
    ...session,
    order: i
  }));

  const toggleDisplayOrder = () => {
    setDisplayOrder(displayOrder === "ASC" ? "DESC" : "ASC");
  };
  
  console.log(displayOrder)

  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <button onClick={toggleDisplayOrder}>재정렬</button>
      {orderSessionList.map((session) => (
        <SessionItem key={session.id} title={session.title} />
      ))}
    </div>
  );
}

export default App;

위의 코드와 같이 useState로 상태를 만들고 setDisplayOrder로 상태값을 바꾼다.
useState의 인자는 초기값이며, [상태, 상태 변경 함수]를 의미한다.

'재정렬' 버튼을 누르면 다음과 같이 상태가 변경되는 것을 볼 수 있다.