과제를 하기전에..
아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다.
전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데..
제발 이쯤되면 익숙해지자..나자신.. 😂
상수데이터란?
UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다.
그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다.
왜 어떻게 상수데이터를 쓸까?
: UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다.
이러한 상수데이터는 컴포넌트 에서 선언하거나, 상수데이터만 모아놓은 별도의 파일로 분리해서 관리할 수 있다.
배운 예시를 밑에 끄적여 보며 정리해 보겠다.
여기서 보이는 메뉴는 굳이 백엔드에서 데이터를 받아오지 않아도 프론트엔드에서 만들 수 있는 상수데이터이다.
이 메뉴를 코드로 표현하는 것을 예시로 배워보았는데, 복습겸 따라쳐 보겠다.
먼저 데이터를 활용하지 못하는 UI구조
//App.js
const App = () => {
return (
<>
<ul>
<li>New reponsitory</li>
<li>Import repository</li>
<li>New gist</li>
<li>New organization</li>
<li>New project</li>
</ul>
</>
);
};이런 UI구조는
list 형태로 반복적인 <li>태그와 Link 컴포넌트를 만들고, 메뉴의 수 만큼 붙여넣기 한 후 content를 수정하는 방식으로 반복적인 UI를 구성하게 하면 유지보수가 힘들고, 일일이 쳐야하는 번거로움이 있다.
위에서는 각각 content는 다르지만 <li>태그는 반복하고있다. 이렇게 반복되는 태그만큼 상수데이터를 만들어서 사용해 보겠다.
일일이 쳤던 데이터 부분을 상수데이터로 만들기 위해 [배열] 안에 객체 형태로 만들어 하나씩 넣었다.
//App.js의 export 자리 밑(컴포넌트 밖)에 선언해 보았다.
export default App;
const MENU_LIST = [
{ id: 1, menuName: "New repository" },
{ id: 2, menuName: "Import repository" },
{ id: 3, menuName: "New gist" },
{ id: 4, menuName: "New organization" },
{ id: 5, menuName: "New project" }
];
//배열할당후, 배열안에는 각각의 요소를 객체로 하는데, 반복되는 UI의 수 만큼 객체를 만든다 (여기서는 5개))
//각각 객체{} 에는 id와 munuName이라는 key를 구성하고, id의 value는 숫자 12345를 할당한다.
//menuName에는 li마다 적었던 content를 적어준다.
//이 객체들의 값이 위에 하드코딩 되어있는 <li> content를 대신했다.참고로 상수 데이터는 컴포넌트 밖에서 선언해주는데,
상수데이터는 state, props 혹은 다시 랜더링 될때마다 새로 선언하고 할당될 필요가 없는 변하지 않는 데이터이때문에 컴포넌트 밖에서 선언해 준다.
** 참고로 상수데이터의 네이밍 컨벤션은 '모두 대문자'인 'UPPER_SNAKE_CASE' 형태로 이름을 지어야 한다.
왜 배열의 형태로 만들었을까?
: 아래에 상수데이터를 이용한 함수를 보면,
배열의 map메서드를 이용해서 배열의 길이만큼 UI를 반복할 것이고,
배열 안에는 UI로 그려질 데이터 묶음이 필요하여 UI단위별로 객체를 만들었고, 객체마다 id를 부여해서 구분할 수 있게 설계하려고 하기 때문이다.
그래서 각각의 태그 안에 content는 상수 데이터에서 만들어놓은 객체의 값이 들어가서 이전의 반복해서 만들었던 UI와 동일한 형태로 브라우저에 출력된다.
const App = () => {
return (
<>
<ul>
{MENU_LIST.map((menuList)=>{
return<li key={menuList.id}>{menuList.menuName}</li>})}
</ul>
</>
);
};
//<ul/>태그 하단에 자바스크립트 코드를 쓸 것이라 {} 중괄호를 넣어준다.
//{}에는 위에 만든 상수데이터를 참조하고, map 매서드를 호출한다.
//인자로는 callback함수를 넣고 매개변수에는 어떤 데이터가 들어올 지 유추할 수 있을 이름을 넣어준다.
//여기서는 아래에 MENU_LIST를 받을 것이니 menuList로 지정해 주었다.
//함수 body 부분에는 return을 쓰고, 반환되는 <li/>태그를 넣어주었다. : 배열의 길이만큼 태그가 반환된다.
//여기서는 길이가 5개라 총 5번의<li>가 화면에 그려졌다.
//이제 <li>태그의 content도 반복이 되어야 하는데, 이 데이터는 매개변수로 들어온다.
//매개변수 자리에는 상수데이터에서 할당한 각각의 객체가 순서대로 들어오는데
//menuList객체에서 menuName라는 데이터 값을 가져오고 싶으니 {menuList.menuName}이라 하였고,
//<li>에 props로 고유한 값이어야하고 추적가능한 값인 key를 부여해야 해서 key={menuList.id}라고 하였다.
// 각각의 객체마다 할당된 겹치지않는 데이터가 순회하면서 key값을 할당하게 된다.위에 하드코딩은 똑같은<li>를 5번 반복해서 입력한 반면,
상수데이터와 map 으로 구현한 코드는 좀 어렵긴하다만..
한번의 태그 반환으로 총 5개의 리스트를 만들어 냈다.
이렇게 하면, UI의 수정이나 삭제, 추가를 할때 일일이 코드를 찾아서 수정하는 방법이 아닌 상수데이터에서 객체만 추가,삭제,수정만 하면 UI에 바로 나타낼 수 있다.
컴포넌트에서는 이렇게 상수데이터를 사용해 보았는데,
이제 다른방법인 따로 데이터를 분리한 파일을 이용해서 사용해보겠다.
파일로 분리하는 경우 필요한 컴포넌트에서 import해서 사용할 수 있는데, 이러한 경우는
- 해당 컴포넌트뿐만 아니라 다른 컴포넌트에서도 상수데이터가 공통적으로 사용되는 경우 또는
- 상수데이터의 길이가 너무 길어서 가독성을 해치는 경우이다.
위에서 한 내용을 파일로 분리해서 나타내기 해보았다.
//uiData.js에 위에 표현한 상수데이터를 가져왔다.
export const MENU_LIST = [
{ id: 1, menuName: "New repository" },
{ id: 2, menuName: "Import repository" },
{ id: 3, menuName: "New gist" },
{ id: 4, menuName: "New organization" },
{ id: 5, menuName: "New project" }
];
//const 앞에 다른 파일에서도 변수로 불러올 수있게 export 해 주어야 한다.이렇게 저장을 하고 다시 App.js에 가서 import를 해준다.
끝이다.
이미 위에서 map으로 구현한게 있어서 바로 결과물이 나오게 되었다.
점점 react 에 관해서 정보를 쌓아가며 익숙해 지곤 있는데 아직도 멀었다!_!
이렇게 배운내용을 정리하면서 차곡차곡 쌓다보면..더익숙해 질것이라 믿으며..