React /part.3 상수 데이터

상수 데이터

이번 글에서는 상수 데이터에 대한 개념과 활용법에 대해 다룹니다.

리액트를 효과적으로 사용하기 위해서는 반복되는 UI를 하드코딩이 아닌 좀더 효율적인 방법으로 구현해야합니다.

그러기 위해서는 데이터 구조, map()사용에 익숙해지는게 중요합니다.

이를 통해 되도록 반복되는 작업들을 줄이고,

코드의 간결성을 유지하면 추후 유지보수를 할 때에도 훨씬 편리합니다.

 

---

1. 상수 데이터란?

상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 말한다.

UI 구성에 필요하지만 동적으로 변하지 않아서

백엔드 API들을 통해 가져올 필요가 없는 데이터들을 상수 데이터로 만든다.

 

 

2. 상수 데이터를 사용하는 이유

UI를 하드코딩으로 만들어두면 코드가 길어져 가독성이 떨어진다.

⇒ 유지보수의 어려움

 

상수 데이터를 활용하면 Array.map()과 조합하여 반복되는 UI를 보다 간결하게 표현할 수 있다.

따라서 레이아웃 수정이 필요할 때

map메서드의 return 부분과 상수 데이터 부분만 수정하면 된다.

⇒ 유지보수성이 용이하다.

 

UI를 효율적이고 확장성 있게 구성할 수 있다.

반복되는 UI 구조를 하드코딩이 아닌

상수데이터와 map메서드를 활용해 간결하게 표현 할 수 있다.

 

3.상수 데이터 활용하기

1. 상수 데이터 선언

상수 데이터는 배열로 생성한다.

map 메서드를 활용해 동일한 UI를 반복한다.

상수 데이터임을 나타내기 위해 변수명은 UPPER_SNAKE_CASE로 작성한다.

const FOOTER_INFO_LIST = [
  { id: 1, link: '<https://github.com/terms>', text: 'Terms' },
  { id: 2, link: '<https://github.com/privacy>', text: 'Privacy' },
  ...
  { id: 11, link: '<https://github.com/about>', text: 'About' },
];

 

2. 상수 데이터 적용

{상수 데이터 이름.map((매개변수) ⇒ (
<li key={매개변수.id}>{매개변수.key}</>
))}

1. 반복적으로 생성하고자 하는 요소의 위치에 작성한다.

 

2. 매개변수는 어떤 값을 가져올 것인지 알 수 있도록 작성한다.

 

3. key값으로 id를 넘겨준다.

(virtual DOM이 변경사항을 비교할 때 key값을 이용)

 

4. 해당하는 데이터를 **{매개변수.key}**의 형태로 넣는다.

 

5. 상수데이터 배열에 있는 각각의 값들을 map메서드를 통해 일치하는 key값에 반복적으로 출력한다.

 

이 과정은 배열의 길이만큼 반복된다.

아래의 코드와 같이 <li>를 만들면 상수 데이터 배열의 길이만 <li>가 생성된다.

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <li key={info.id}>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

 

 

3. 상수 데이터 선언 위치

 

컴포넌트 파일 내부

컴포넌트의 state나 props 등, 컴포넌트 렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성

컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

⇒ 상수 데이터는 컴포넌트 외부 즉 컴포넌트의 상단 부분(컴포넌트 선언 전) 또는 하단 부분(컴포넌트 export한 아래)에 작성한다.

 

 

별도의 .js 파일로 분리

상수 데이터를 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 공통적으로 사용할 경우

상수 데이터의 길이가 너무 길어 컴포넌트와 함께 작성해 가독성을 해치는 경우

해당 파일에서 export한 상수 데이터를 사용할 컴포넌트에서 import하여 사용

 

 

 

---

다음글에서는  Mock Data에 대해 다룹니다.

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!