CodeHoon

안녕하세요 상훈입니다.

Vue.js 3 + Vue Router 를 사용하여 페이지를 넘기고 params에 원하는 값을 전달하는 경우를 포스팅하도록 하겠습니다.

이렇게 컨텐츠 한개가 객체(Object)로 적용하겠습니다.

item : {
	title: 'asdasdasdas',
	content: 'asgasfasf',
	date: new Date()
}

이런식으로 객체는 구성되어있습니다.

string만 데이터를 전달하는것과 거의 동일합니다.

1. 데이터를 전달할 Vue파일

//List.vue
<template>
<div v-for="(item, index) in itemList" class="w-full flex">
        <div class="w-8 h-7">{{ index++ }}</div>
        <div class="flex-1" @click="moveToDetail(item)">{{ item.title }}</div>
        <div class="w-32 h-7">{{ item.date }}</div>
</div>
</template>

<script>
...
 methods: {
    moveToDetail(item) {
      this.$router.push({
        name: "ContentDetail",
        params: { item: JSON.stringify(item) },
      });
    },
  },
 ...
 </script>

title을 클릭하면 item 객체를 전달하는 것으로 선언하였습니다.

저기서 item 객체를 문자화 하였는데요.
이유인즉슨, 파라미터를 넘겨줄 때 그냥 넘기게되면 이도저도 안되는 [Object object] 가 넘어옵니다. 
그래서 stringify로 문자화한 후에 내용을 넘깁니다.

2. route.js (/route/index.js) -브릿지 역할

 //routes
 
 {
    path: "/ContentDetail/:item",
    name: "ContentDetail",
    component: () => import("../components/Contents/ContentDetail.vue"),
    props: true,
  },

1. path 속성에 :item이라는 key의 이름으로 값을 전달할 것을 지정.
2. props: true  > props를 true로 설정하여 props를 전달할 수 있게 설정하였습니다.

3. 전달받을 Vue 파일

<template>
<div>
      <div"> Title: {{ paramObj.title }} </div>
      <div> Content: {{ paramObj.content }} </div>
      <div> date: {{ paramObj.date }} </div>
</div>
</template>

<script>
...

props: {
    item: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      paramObj: {},
    };
  },
  mounted() {
    this.paramObj = JSON.parse(this.$route.params.item);
  },
 
 ...
</script>

1.props로 params를 전달받을 것을 명시
2. item 키를 가진 문자를 받아올 것으로 명시 (JSON.parse를 통해 객체화 실시예정)
3. item 객체를 할당할 ref 선언(data)
4. 컴포넌트가 마운트 완료되고, params 로 받아온 객체를 할당.

짧지만 긴 포스팅을 마치겠습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

json 객체(object) 형태의 문자열을 json 객체화 하려면 간단하게 

JSON.parse(str);

하면된다. 

추가적으로 배열(Array) 또한 가능하다. (몰랐다)

■ 배경설명

현재 프로젝트가 Web → Native(React Native) → Web 이기 때문에 내 입맛대로 데이터의 형식을 설정할 수 없기 때문에, 배열로 변환하는 방법 또한 알게되었다.

■ 결론

일단 결과부터 말하자면, 방법은 다음과 같다.

// 배열 형태의 문자열
// (JSON객체형태가 곧바로 string으로 변환되어나온 형태)

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";

// 문자열 → 배열
arryStr = JSON.parse(arryStr);

배열(Array) 인 것을 알 수 있다.

그러나, 

typeof(arryStr); //Object

라고 출력된다. (으잉?)

위처럼 사용해도 배열에 대한 모든 기능들은 동작하니 문제는 없을 것이다.

하지만 기분이 찜찜하고 이상하니 조금 더 파고들어가보았다.

■ 부연설명

위에서 얻은 arryStr 을 가지고 새로운 배열에 반복문을 통해 push 해서 type을 해보겠다.

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";
arryStr = JSON.parse(arryStr);

// ---------------------------------------

let result = []; //새로운 빈 배열 선언

arryStr.forEach( (item, idx) => {  //반복문을 통해
    result.push(item);             //빈배열에 값을 집어넣기
});

console.log(result);               //['안녕하세요.', '안녕히가세요.']
console.log(typeof(result));       //object

????

result 라는 녀석은 배열로 선언해서 배열로 끝났고, 각각의 인덱스도 가지고 있는데, 
type을 확인해보니 객체(Object)로 출력되어져 있다.

비교대상이 배열인지 여부를 확인하는 메서드를 사용해서 판독해보자.

> Array.isArray() :: 비교대상이 배열이면 true, 아니면 false를 반환하는 메서드.

// 비교 대상 ( ) 안에 있는 대상이 배열이면 true, 아니면 false를 출력한다.

// Array.isArray() 를 통해서 한 번 더 배열인지 여부를 판독
console.log(Array.isArray(arryStr)); //true
console.log(Array.isArray(result2)); //true

왜냐하면, 자바스크립트(JavaScript)에서의 배열(Array)는 배열이 아니라 객체(Object)이기 때문이다. 
자세한 내용은 아래의 링크를 참고해주시길 바랍니다.

JSON.parse() 하나로 이렇게 글이 길어질 줄 몰랐지만, 길어졌다.

이상입니다.

참고

미리보기를 해보니 역슬래쉬가 \로 출력되네요.

작성할때는 역슬래쉬 정상적으로 되었는데 말이죠. 유의해주시길 바랍니다!

이미지 참고 ㅎㅎ

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

React.js, function component style

RestAPI 등 외부 API를 적용하여 데이터를 외부에서 받아와서 useEffect Hooks 내에서 데이터를 풀어줄 때의 주의사항 중 한개를 서술한다.

기본적으로 REST API와 같은 외부 데이터들은 promise.then 형식으로 데이터를 받는다.

그럴 때 async await을 사용하는데,

React.js useEffect() Hook에서는 async를 직접적으로 사용하면 안된다.

useEffect ( async () => {
	await something...
})

이렇게 사용하면 안된다는 뜻이다.

async await을 사용하려면, 내부에서 사용해야한다.

useEffect (() => {
	const result = async () => {
    	const something = await axios.get( ) ...
    }
})

이런 식으로 말이다.

왜냐하면 useEffect() Hook은 void 속성을 가져, 반환하는 값이 없다.

그러나 async await이 내뱉는 결과물은 객체 형태이기 때문이다.

이상 메모 끝~

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.