상수 데이터

변하지 않는 데이터, 정적인 데이터

사용하는 이유

• UI를 만들 때, 백엔드 API에서 가져온 동적으로 변하는 데이터를 사용하는 대신에 정적인 상수 데이터를 만들어서 UI를 더 쉽고 효율적으로 구성한다.

• 반복되는 UI를 하나 하나 만들어주면 불필요하게 코드가 길어져 유지보수가 어렵다.

• 반복되는 UI를 상수 데이터 + Array.map() 함수를 이용해서 간결하게 만들 수 있다.

• 나중에 수정할 필요가 생겼을 때는 상수 데이터에서 해당하는 부분의 내용만 변경해주면 되서 유지보수가 편하다.

• 상수 데이터를 사용하지 않는다면, 똑같은 컴포넌트를 중복되게 사용하고 일일히 props를 할당하면서 하드코딩해야 한다.

• 상수 데이터를 사용하지 않을 때, 중복되는 컴포넌트 중 하나의 컴포넌트 내용을 변경해야 한다면 그 하나의 컴포넌트를 찾아서 props에 할당된 값을 다시 수정해야 한다.

사용하는 방법

• 상수 데이터만의 별도 파일을 만들고 그 안에서 상수 데이터를 export하면서 선언해준다.

• 만들어진 상수 데이터를 사용하고 싶은 파일에 import한 다음 Array.map() 함수를 이용해서 상수 데이터가 사용된 컴포넌트를 렌더링한다.

• 상수 데이터의 길이가 너무 길거나, 여러개의 파일에서 같이 사용하는 경우에는 별도의 JS파일로 분리하면 좋고, 해당 파일에서만 사용하는 간단한 상수 데이터의 경우에는 파일 내부에서 만들어 사용해도 된다. 단, 파일 내부에서 만들어 사용할 때는 해당 컴포넌트보다 먼저 선언하면 안된다.

• 상수 데이터는 주로 웹페이지 맨 아래에 있는 Footer에 들어가는 기업의 정보나 주소같은 반복된 UI에 사용된다. 이 정보들은 주로 변하지 않는 값들이기 때문에 상수 데이터로 만들어서 렌더링하면 간편하다.

• 댓글처럼 수시로 바뀌는 데이터에는 사용할 수 없다.