React 공부 일기장 (3)

My Tenth Post


03. React 코딩 공부 일기장

by Movie Web Service App coding with Normad Corder

오늘로서 영화 소개 웹만들기를 마쳤습니다.

이것저것 하느라 매운 쉬운 프로젝트를 꽤 오래 끌게 되었습니다.

마치면서 느꼈던 점을 기록하려고 합니다.


먼저 API사용을 해보니 실제 데이터를 가져다가 쓸 수 있다는 점이 너무 매력적으로 다가오더라구요.

주의점은 JSON객체로 받는 데이터를 정확하게 내가 쓰고 싶은 것만 보여주지 않기 때문에

ES6를 이용하여 내가 원하는 데이터를 정확하게 가져오는 부분을 주의해서 사용해야 합니다.

특히 ! 대소문자요 ! !


다음으로는 Router를 처음 사용해 보았는데 경로를 가지고 프로그램의 흐름을 조작할 수 있다는 것이

약간 Spring-Framework과 비슷하면서도 React를 이용하여 새로고침없이 바로바로 결과를 확인할 수 있는 점이

신기하면서도 편리하였고, Spring과 비교해서 저는 React가 훨씬 빠르다고 느꼈습니다.


다른 부분도 너무나 느낀 점과 배운 점이 많았지만 마지막으로 Router안에서 a태그처럼 사용가능한 Link JSX를 말씀드리고 싶습니다.

이 컴포넌트는 a태그와 역할이 동일하고 CSS를 이용하여 페이지를 디자인할 때 a로 사용합니다.

하지만 a태그에서 더욱 업그레이드되어 props를 컴포넌트에 전달가능합니다.

예를 들어

    <Link
      //원래 중괄호 2개 입니다. md에서 중괄호 2개는 변수로 인식하여 부득이하게 ^로 표시하였습니다.
      to={^
        pathname: 경로명,
        state: {
          전달하고자 하는 props들,
          ..
          ...
        },
      ^}
    >

이런식으로 Link의 props인 to를 이용하여 단순히 클릭을 통해서도 페이지간의 데이터 이동이 가능합니다.


프로젝트를 마치며 요렇게 잃어버릴 것 같은 내용들을 적어두었고 차후에 또 기록해야 할 중요한 코드가 있으면

그 때 다시 포스팅하도록 하겠습니다.

안녕 ~ ~ !


소스 보기_Github

Good Bye ~