메가테라 프론트엔드 생존코스 3주차 회고

늦은 3주차 회고이다.

회고를 써야할 때 나는 결혼식이었기 때문에 .... 핑계아닌 핑계를 대본다.

 

이제 큰 산을 넘었으니 다음 큰 산을 넘을 차례!

 

3주차 React로 사고하기에 대해 공부하면서 ts와 함께 해서 그런지 매우 헷갈리는 것들이 많았다.

Vue.js에 익숙해져서 그런가?

상태(state)에 대해 이해하는데는 어렵지 않았으나 props 사용할 때 코드작성이 어렵게 느껴졌다.

 

vue

// 상위 컴포넌트
<template>
  <div>
    <ChildComponent :parentsProps="parentsProps" />
  </div>
</template>

<script>
import ChildComponent from "./component/ChildComponent.vue";

export default {
  components: {
      ChildComponent: ChildComponent,
    },
  data() {
      return {
          parentsProps: 'value'
          };
  },
    ... 생략
}


// 하위 컴포넌트
<template>
  	... 생략
</template>
<script>
export default {
  props: {
      parentsProps: parentsProps,
    },
    ... 생략
}

 

 

react & ts

// 상위 컴포넌트
import { ChildComponent } from "./ChildComponent";

import { useState } from "react";

export default funciont ParentsComponent() {
	const parentsProps = useState<string>('');
    
    return(
    	<div>
        	<ChildComponent 
            	parentsProps={parentsProps}
                
            />
        </div>
    )
}

// 하위 컴포넌트
type ParentsComponentPropsType = {
	parentsProps: string;
};

export default funciont ChildComponent({
	parentsProps
}: ParentsComponentPropsType) {    
    return(
    	<div>
        	{parentsProps}
        </div>
    )
}

대충 작성했으니 대충 보자.

 

위 두 가지 예시를 가지고 비교했을 때

개인적으로 코드 작성이 편하고 HTML 요소 단위로 세분화하기 편한 것은 리액트, 사람이 보기 편한건 뷰인 것 같다.

 

둘 다 장단점이 있지만 아직 리액트와는 덜 친해진 것 같단 생각이 든다.

아직 내외하는 사이인듯 하여 강의를 여러 차례 수강하며 익숙해지는 시간이 좀 더 필요할 듯 하다.

특히 typescript와는 많이 조우해야 할 것 같다.