[React] 상수데이터
페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있다.
이런 데이터들을 상수 데이터로 만들어 UI 를 구성할 수 있다.
상수 데이라는 이름 그대로 변하지 않는 정적인 데이터를 의미 한다.
상수 데이터를 사용하는 이유
반복되는 UI 를 하드코딩으로 일일이 만들어두면 코드가 길어져서 가독성에 좋지 않다. 수정이 필요할때 수정해야 하는 부분들을 찾기 힘들어 유지보수가 어렵다.
하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI 를 보다 간결하게 표현할 수 있다.
이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return 하는 jsx 부분만, 내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지 보수 에 좋다.
상수데이터 활용 / 선언
중복되는 코드를 기반으로 상수 데이터를 만들 때는 우선 바뀌어 들어갈 부분을 찾아야 한다. map 메서드를 활용 해서 동일한 UI 를 반복할 것이기 때문에 상수 데이터의 형태는 배열로 만들어야 한다. 배열 안의 요소의 개수와 값은 처음에 파악했던 바뀌어 들어갈 부분을 기반으로 구성 한다. 이때, 상수 데이터임을 나타내기 위해서 변수명은 UPPER_SNAE 컨벤션에 따라 명명 한다.
상수데이터 적용
선언한 상수 데이터와 map 메서드를 활용해 실제 코드에 적용한 모습이다. 활용 전의 예시와 비교했을때, Footer 컴포넌트가 훨씬 간결해지고 유지보수도 좋다.
상수데이터 선언 위치
상수 데이터는 컴포넌트 파일 내부에 선언해서 사용할 수도 있고, 별도의 .js 파일로 분리해서 사용할 수도 있다.
-
컴포넌트 파일 내부에서 선언
상수 데이터가 해당 컴포넌트 내에서만 사용되고 가독성을 해치지 않는다면, 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용한다. -
컴포넌트의 state나 props 등, 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성
컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성
정리
- 상수 데이터란 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터이다.
- 반복되는 UI 구조는 상수 데이터와 map 메서드를 활용해 간결하게 표현할 수 있다.
- 상수 데이터를 활용하면 UI를 효율적으로, 확장성 있게 구성할 수 있으며 유지보수가 용이하다.
- 상수 데이터는 컴포넌트 파일 내부에서 선언하거나, 별도의 파일로 분리해서 사용할 수 있다.
