[TIL : 26] 컴포넌트 디자인

jabae·2021년 11월 28일
0

TIL

목록 보기
26/44

Achievement Goals

  • 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.

    Component Driven Development (CDD) : 재사용할 수 있는 컴포넌트를 먼저 생성하고, 이렇게 만들어진 컴포넌트를 결합하고, 페이지를 조립해 나가는 Bottom-up 방식 개발 방법이다.

  • 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.

    yes! 🙌
    Storybook은 Component Driven Development을 하기 위한 도구로, 여러 컴포넌트들을 각각 따로 볼 수 있게 해 주어 한 번에 하나의 컴포넌트에서 작업이 가능하게 해 준다.

  • 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
    • 프로젝트의 규모가 커지면서 복잡해지고, 팀원의 수도 많아지면서 CSS 작업을 효율적으로 하기 위한 CSS의 구조화가 필요해졌다. 이를 위한 해결 방법으로 CSS 전처리기(CSS Preprocessor)는 구조화된 CSS를 작성할 수 있게 도움을 주는 도구이다. CSS의 문제점들을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결해 나갈 수 있다. CSS 전처리기에 맞는 Compiler를 사용해야 하고, 대표적으로 SASS가 있다. 내부에서 어떤 기능을 하는 지 모른 채 사용되며 용량이 어마하게 커지는 CSS 전처리기의 문제점을 보완하기 위해 CSS 방법론이 만들어졌다. 어플리케이션으로의 개발 방향의 진화와 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다. 이를 위해 CSS-in-JS는 컴포넌트 기반의 방식을 위해 만들어졌고, 대표적으로 Styled-Component가 있다.

      CSS 방법론의 지향점

      • 코드의 재사용
      • 코드의 간결화(유지보수 용이)
      • 코드의 확장성
      • 코드의 예측성(클래스 명으로 의미 예측)
  • 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.

    yes! 👍
    다음과 같이 작성한다.

    import styled from "styled-components";
    
    const 컴포넌트명 = styled.태그`
      // ...스타일 속성
    `;

    활용 1 : 다음과 같이 props의 여부에 따라 다르게 적용이 가능하다! (pressed props : props 속성 우선 적용)
    활용 2 : 스타일도 상속받을 수 있다!

    import styled from "styled-components";
    
    const Button = styled.button`
      background: ${(props) => (props.colored ? "blue" : "white")};   // 활용 1 : props 적용
      color: ${(props) => (props.colored ? "white" : "blue")};
      // ...
    `;
    
    const Red = styled(Button)`   // 활용 2 : 스타일 상속
      color: Red;
    `;
    
    export default function App() {
      return (
        <div className="App">
          <Button>기본버튼</Button>
          <Button>기본버튼</Button>
          <Button colored>props적용</Button>
          <Red>기본버튼상속+레드색상추가</Red>
        </div>
      );
    }

    결과는 아래와 같다! 한 파일에서 기능과 스타일 모두 관리할 수 있어 편하다!

  • DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

    useRef : Dom 엘리먼트 주소값을 활용해야 하는 경우 사용한다. 할당된 주소값은 리렌더링 되어도 바뀌지 않고, 컴포넌트의 속성만 조회 & 수정한다. useState처럼 남용해서는 안된다.

    useRef를 사용하는 경우 (특정 Dom을 가리킬 때!)

    • focus
    • text selection
    • media playback
    • 에니메이션 적용
    • d3.js, greensock 등 DOM 기반 라이브러리 활용

    기본 사용법은 다음과 같다.

    import React, { useRef } from "react";
    
    const 주소값_그릇 = useRef(참조자료형)
    
    return (
        <div>
          <input ref={주소값_그릇} type="text" />  // 주소값_그릇에 input DOM 엘리먼트 주소가 담김
        </div>
      );

    아래는 focus를 활용해 로그인을 만들어보자.
    우선 아이디와 패스워드 인풋에 사용할 useRef를 선언해 준다.

    const Focus = () => {
      const idRef = useRef(null);
      const pwdRef = useRef(null);

    아래 컴포넌트에서 ref={pwdRef}이 형식으로 주소값을 담으면 current 속성 객체를 반환한다. 따라서 조건을 걸어줄 때 주소값_그릇.current 이렇게 사용한다. 아래는 키를 누르고 엔터를 눌렀을 때 focus()로 다음 인풋창으로 키를 이동시켜준다.

     const handleInput = (event) => {
        if (event.key === "Enter") {
          if (event.target === idRef.current)
            pwdRef.current.focus();
          else if (event.target === pwdRef.current)
            idRef.current.focus();
          else
            return;
        }
      };
    
      return (
        <div>
          <div>로그인</div>
          <div>
            <label>아이디</label>
            <input ref={idRef} onKeyUp={handleInput} />
          </div>
          <div>
            <label>비밀번호</label>
            <input ref={pwdRef} onKeyUp={handleInput} />
          </div>
        </div>
      );
    };

    처음엔 이해가 좀 안됐는데 쓰다보니까 딱 위와 같이 활용해야할 적절한 사례가 있는 것 같다.

  • 기본 HTML Entities 사용하기

    HTML Entities : HTML에서 특정 캐릭터들이 예약되어있기 때문에 표기의 혼란을 막기 위해서 사용한다.
    다음과 같이 사용한다!

    <span>&times;</span>


    출처 : https://unicode-table.com/kr/html-entities/

그 외

  • Enter를 눌렀을 때 이벤트핸들러 함수를 실행시키고 싶다면! 이벤트핸들러 함수에서 if (event.key === 'Enter') { ... } 이걸 추가하면 된다! event.key가 사용자가 누르는 키를 받아온다!
  • 컴포넌트에서 함수를 부를 때, onClick={() => eventHandler(props)} 이렇게 전달해 주어야 한다! 이걸 까먹어서 계속 에러와 씨름을 했다...😫 계속 API만 하다가 오랜만에 무언가 만들려니까 머리가 쑤셨다 🤯
  • useState를 사용 할때, 특정 인덱스의 값을 삭제하려고 했는데 .splice로 하려니 되지 않았다! 반환값이 삭제되는 데이터였던 걸 까먹었었다... 아 생각해보니 알고리즘 푼 지 엄청 오래 됐다. 🥲 stackoverflow
profile
it's me!:)

2개의 댓글

comment-user-thumbnail
2021년 11월 28일

화이팅!!

1개의 답글