JS 코딩의 기술) 23일차 컴포넌트 아키텍처를 이용해 애플리케이션 만들기

//tip 49 컴포넌트 아키텍처를 이용해 애플리케이션을 만들자

//컴포넌트 아키텍처로 흩어져있는 HTML, CSS, 자바스크립트를 모으는 방법을 알아보자

//HTML, CSS, 자바스크립트와 같은 프론트엔드 언어들은 서로 다른

//언어와 파일 형식을 만들어 지기에 파일을 구조화 하는데에 어려움이 있다.

//오래동안 개발자들은 서로 다른 디렉터리에 비슷한 파일 형식 끼리 보관을 했다.

//하지만 분리해둔 파일들 중 마크업에 작동하기 위해 작성되었던 파일들이 

//마크업 파일들이 없어졌을때 같이 없어지지 않고 사용되지 않은채 자리만 차지할 뿐이다.

//개발자 도구가 발전함에 따라 새로운 패턴이 생겼다.

//바로 컴포넌트 아키택쳐라는 패턴이다.

//컴포넌트는 관련있는 모든 코드를 조합해 하나의 디렉터리에 담은 것이다.

//이렇게 하면, 조각을 하나씩 추가하는 방법으로 웹페이지나 애플리케이션을 만들 수 있다.

//예를 들어 사이드바의 버튼을 만드는 것 처럼

//작동하는 애플리케이션이 될 때까지 컴포넌트를 추가한다.

//컴포넌트의 가장 큰 문제점은 빌드 도구에 의존한다는 점이며, 그 다음 문제는 프레임워크에 의존한다는 점이다.

//이번에는 리액트 코드를 살펴 볼 예정인데, 컴포넌트 아키텍처도는 리액트에 국한되있지 않고 다양한 프래임워크에 이 개념을 적용할 수 있다.

//이 개념을 잘 이해한다면 다른 프래임 워크의 기초를 배울 때 생기는 어려움을 줄일 수 있을 것이다.

//컴포넌트 아키텍처의 실제 사례를 살펴보자.

//컴포넌트 아키텍처를 이용하면 간단한 패키지 하나에 모든 것을 결합할 수 있다.

import React from 'react';

import './Copyright.css';

export default function CopyRightStatement() {

  const year = new Date().getFullYear();

  return (

    <div className="copyright">

      Copyright {year}

    </div>

  );

}

//return문에 마크업이 있고, CSS클래스는 className에 작성되어 있다.

//이는 리액트 프래임워크의 일부인 JSX라고 부르는 특별한 마크업이다. HTML과는 별개이다. 그냥 자바스크립트 함수에 포함된 마크업이라 생각하자

//위의 코드의 파일 경로를 보자 (architecture/component/simplifying-js-component/src/components/Copyright/Copyright.js)

//프로젝트 최상위 디렉터리는 `simplifying-js-component`이며 코드는 `src/components` 디렉터리에 담겨있다.

//또한 컴파일된 코드가 담기는 `public` 디렉터리도 있다. 브라우저가 컴포넌트를 다룰 수 없기에 모든 것은 더 간단한 컴포넌트로 연결된다.

//componets 디렉터리는 다뤄야할 모든 컴포넌트를 담고있다. 각 컴포넌트는 개별 디렉터리에 나워져 있고, Copyright.css, Copyright.js, Copyright.spec.js

//파일이 담긴 Copyright 디렉터리가 있다. 디렉터리 이름이 대문자로 시작하는 것은 리액트에서 사용하는 컨벤션이다.

//컴포넌트를 공유하고 싶다면 별도의 저장소로 옮기거나 다른 프로젝트로 복사해갈 수 있다.

//의도하던 동작이 더 이상 필요하지 않다면 디렉터리 전체를 삭제할 수도 있다.

//불필요한 CSS가 어딘가에 남아있는 것은 걱정하지 않아도 된다.

//관련된 모든 파일이 모여 있기 때문에 같이 삭제할 수 있다.

//또한 동작에 추가할 사항이 있다면 CSS를 비롯한 동작을 위한 파일들이 같은 디렉터리에 담겨있기에 바로 확인이 가능하다.

//좀더 복잡한 컴포넌트를 예를 들어보자.

//아이콘이 있는 버튼을 생각하자. 버튼에는 스타일과 마크업이 필요하고, 이미지와 클릭시 동작도 처리해야 한다.

//이번엔 컴포넌트를 재사용할 수 있도록 만들자

//최대한 하드 코딩하는 설정이 없어야 한다.

//클릭시 어떤 동작이 필요한지는 명시적으로 작성하지 않는다.

//🔰대신, 클릭할 때의 동작을 컴포넌트에 주입하자. 동작이나 자원을 컴포넌트에 전달하는 것은 다른 형태의 의존성 주입이다.🔰

//🔰(의존성 주입은 tip32때 다루었고 함수의 인수로 외부 함수를 전달하는 기술이다.)

//의존성 주입을 이용하면 유연하고 재사용이 가능한 코드를 작성할 수 있다.

import React from 'react';

import './IdeaButton.css';

import idea from './idea.svg';

export default function IdeaButton({ handleClick, message }) {

  return (

    <button

      className="idea-button"

      onClick={handleClick}

    >

      <img

        className="idea-button__icon"

        src={idea}

        alt="idea icon"

      />

      { message }

    </button>

  );

}

//위의 리액트에서는 주입된 의존성을 함수의 인자를 통해 접근할 수 있고, 해체할당을 이용해 꺼내올 수 있다.

//버튼의 메시지는 주입된 값에 따라 표시되고, 중괄호는 템플릿 문법이고 변수 정보를 감싼다. 즉, 변수message의 값이 버튼에 표시되는 메시지이다.

//또한 이미지도 가져오는데, CSS를 가져올 때는 변수를 사용 안했지만, 지금은 이미지의 경로가 담긴 변수를 사용해 src 속성으로 설정한다.

//리액트의 영역에서는 특별한 HTML 속성을 이용해 메시지를 주입할 수 있다. 다른 프래임 워크는 데이터를 주입할 때 다른 컨벤션을 따른다.

//그렇지만 어떤 방식을 통해서든 정보를 전달할 수 있도록 한다는 점은 같다. 바로 이 점이 컴포넌트를 강력하게 만든다.

//주 컴포넌트는 소스코드의 최상위에 위치한다.

//코드를 가져오고 다른 조각을 모두 포함하며 모든 것을 결합한다.

//이 경우 버튼 컴포넌트를 두 번 재사용하고, 각 버튼이 서로 다른 메시지를 표시한다.

//빌드 도구가 서로 다른 디렉터리에 파일을 분리해준다

//사용자 수준에선느 조각을 분리해두는 것이 아무런 문제가 없다.

//컴포넌트 아키텍처는 직관적으로 이해하기 쉽다.

//관련된 파일을 한곳에 모으는 것이기 때문이다.

//유일한 어려움은 모든 것을 연결하기가 쉽지 않다는 점이다.