[TIL] Day49 #React-Custom-Component

2022.07.04(Mon)

[TIL] Day49
[SEB FE] Day48

☑️ [Pair] React Custom Component2

✔️ 오늘은 저번주 금요일 Bare minimum Requirement에 이어 Advanced Challenge을 구현해보았다.
React, Styled Components, Storybook을 활용해서 React-custom-component(Autocomplete Component, ClickToEdit Component)를 구현해보기 🙌

1. Autocomplete Component (자동완성) : 좀 까다로웠던 구현.. 기본적인 자동완성 기능 + 키보드 방향키와 엔터키로 옵션을 제어하는 기능도 쉽지 않았다..🫠 🥲 enter key로 option을 선택하고 계속 생기는 커서 깜빡임을 없애긴 했는데 여러 options에서 방향키로 선택할 때 마다 input 안의 커서가 앞뒤로 움직이는 현상은 해결하지 못함..

    import { useState, useEffect, useRef } from "react";
    import styled from "styled-components";
    
    const deselectedOptions = [ // 자동완성 Options List
      "rustic",
      "antique",
      "vinyl",
      "vintage",
    	// ...
    ];
    
    export const InputContainer = styled.div`
      // ... CSS 생략
    `;
    
    export const DropDownContainer = styled.ul`
      // ... CSS 생략
    `;
    
    export const Autocomplete = () => {
    
      const [hasText, setHasText] = useState(false);    // input값 존재 유무
      const [inputValue, setInputValue] = useState(""); // input값 상태 
      const [options, setOptions] = useState(deselectedOptions); // input값을 포함하는 자동완성 추천 항목 리스트
      const [keys, setKeys] = useState(0); // 키보드 방향키에 대한 상태
      const blurInput = useRef(); // input 박스에서의 커서 깜박임 상태
    
      useEffect(() => {
    		// 내용을 지우고 다른 값을 input에 넣었을 때 전에 방향키로 머물렀던 옵션 위치가 그대로 있는 현상을 초기화시켜줌
        setKeys(0); 
        if (inputValue === "") {
          setHasText(false);
        }
      }, [inputValue]);
    
      const handleInputChange = (event) => {
        setInputValue(event.target.value); // 입력하는 값으로 input값 변경
        setHasText(true); // 입력시 input값이 존재하므로 true로 값 변경
        setOptions( // options 상태에 따라 drowdown에 보여지는 항목이 달라지도록 filtering
          deselectedOptions.filter(
            (el) => event.target.value === el.slice(0, event.target.value.length)
          )
        );
        // setOptions(deselectedOptions.filter(el => el.includes(event.target.value))); // 위와 같은 기능
      };
    
    	// dropdown에 제시된 항목을 눌렀을 때, input값이 해당 항목의 값으로 변경되는 함수
      const handleDropDownClick = (clickedOption) => {
        setInputValue(clickedOption);
      };
    
      const handleDeleteButtonClick = () => {
        setInputValue(""); // input값이 빈 문자열이 되도록 값 변경
      };
    
    	// input 박스에 커서 깜박임 없애는 함수
      const onBlur = () => {
        blurInput.current.blur();
      };
    
      const handleKeyUp = (event) => { 
        if (hasText) {
          if (event.keyCode === 38) { // 키보드 방향키(상) 입력했을 때
            // event.key === 'ArrowUp'
            if (keys > 0) {
              setKeys(keys - 1);
            }
          } else if (event.keyCode === 40) { // 키보드 방향키(하) 입력했을 때
            // event.key === 'ArrowDown'
            if (keys < options.length - 1) {
              setKeys(keys + 1);
            }
          }
        }
    
        if (event.key === "Enter") { // 키보드 Enter키 입력했을 때
          setInputValue(options[keys]);
          setHasText(false);
          onBlur();
        }
      };
    
      return (
        <div className="autocomplete-wrapper">
          <InputContainer>
            <input
              value={inputValue}
              onChange={handleInputChange}
              onKeyUp={handleKeyUp}
              ref={blurInput}
            ></input>
            <div className="delete-button" onClick={handleDeleteButtonClick}>
              &times;
            </div>
          </InputContainer>
          {hasText ? ( // input값이 존재하면 dropdown 보이게!
            <DropDown
              options={options}
              handleComboBox={handleDropDownClick}
              keys={keys}
            />
          ) : (
            null
          )}
        </div>
      );
    };
    
    export const DropDown = ({ options, handleComboBox, keys }) => {
      return (
        <DropDownContainer>
          {/* input값에 맞는 자동완성 선택 옵션을 map으로 뿌려줌 */}
          {options.map((el, idx) => {
            return (
              <li
                key={idx} // map 사용시 꼭 key 작성해주기!
                className={idx === keys ? "marked" : ""} // 선택된 옵션 항목 배경색 설정 클래스 적용
                onClick={() => handleComboBox(el)}
              >
                {el}
              </li>
            );
          })}
        </DropDownContainer>
      );
    };

2. ClickToEdit Component

   : 자동완성에 비해 쉬운 편이었다~!
   😈 input 박스를 클릭하면 값을 수정할 수 있다. 이 기능을 참고해서 CRUD 플젝에서 미처 구현하지 못했던 Update 기능을 이런 식으로 접근하면 되려나..?

 import { useEffect, useState, useRef } from "react";
 import styled from "styled-components";
 
 export const InputBox = styled.div` // 모든 내용을 담을 제일 큰 container
   // ... CSS 생략
 `;
 
 export const InputEdit = styled.input` // input box
   // ... CSS 생략
 `;
 
 export const InputView = styled.div` // input box을 담을 각각의 container
   // ... CSS 생략
 `;
 
 export const MyInput = ({ value, handleValueChange }) => {
   const inputEl = useRef(null);
   const [isEditMode, setEditMode] = useState(false); // 수정할 모드 on/off
   const [newValue, setNewValue] = useState(value); // 변경할 값을 관리할 상태
 
   useEffect(() => {
     if (isEditMode) { // 수정모드이면
       inputEl.current.focus(); // input box에 커서 깜빡임 focus
     }
   }, [isEditMode]); // 수정모드일 때만 렌더링
 
   useEffect(() => {
     setNewValue(value);
   }, [value]); // value가 변경될 때만 렌더링
 
   const handleClick = () => { // 클릭했을 때 이벤트
     setEditMode(!isEditMode);
   };
 
   const handleBlur = () => { // 수정 모드 OFF
     handleValueChange(newValue);
     setEditMode(false);
   };
 
   const handleInputChange = (e) => {
     setNewValue(e.target.value); // value 값 변경
   };
 
   return (
     <InputBox>
       {isEditMode ? ( // 수정모드이면 <InputEdit />
         <InputEdit
           type="text"
           value={newValue}
           ref={inputEl}
           onBlur={handleBlur}
           onChange={handleInputChange}
         />
       ) : (
 				// 수정모드가 아니면 수정된 값 또는 그냥 값 보여주기
         <span onClick={handleClick}> 
           {newValue} 
         </span>
       )}
     </InputBox>
   );
 };
 
 const cache = {
   name: "김코딩",
   age: 20,
 };
 
 export const ClickToEdit = () => {
   const [name, setName] = useState(cache.name);
   const [age, setAge] = useState(cache.age);
 
   return (
     <>
       <InputView>
         <label>이름</label>
         <MyInput
           value={name}
           handleValueChange={(newValue) => setName(newValue)}
         />
       </InputView>
       <InputView>
         <label>나이</label>
         <MyInput
           value={age}
           handleValueChange={(newValue) => setAge(newValue)}
         />
       </InputView>
       <InputView>
         <div className="view">
           이름 {name} 나이 {age}
         </div>
       </InputView>
     </>
   );
 };

➰ Advanced Challenge 13/13 Test Pass ✌️

---

☑️ 종합 Quiz

⌘ CSS in JS

• CSS 작성을 위해 여러 라이브러리 사용 → 번들의 크기 커짐 ⬆️
• 빌드시 Class명이 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙 필요 ❌
• 상태가 변경되면 JS의 CSS 코드를 읽어와 파싱하는 단계부터 시작 ⇒ CSS-in-CSS에 비해 CSS 적용 느림

⌘ Storybook

• CDD(Component Driven Development)를 하기위한 도구
• 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있음
• 컴포넌트를 문서화 및 시각화할 수 있음
• 독립적인 개발 환경에서 실행 → UI 컴포넌트를 집중적으로 개발 가능

⌘ useRef

: React에선 DOM 직접 건들 금지 → document.querySelector … 사용 ❌
→ But, DOM 객체 주소 필요한 상황 발생 ⇒ useRef() 탄생 🐣

• DOM 노드, Element, React 컴포넌트 주소값 참조 가능
• useRef를 통해 DOM을 직접 조작시 리렌더링이 되지 않음
• useRef를 통해 값 저장시 리렌더링 후, 값 초기화 ❌ ⇒ 렌더링 여부 상관없이 값을 유지하고 싶을때 사용

---

아샷추로 카페인 충전했는데도 오늘 하루 넘넘 졸리다 🫠
맨날 미루고 미뤄서 아직 한번도 안들은 알고리즘&자료구조 강의 오늘은 꼭꼭 듣기 🎧
내일은 저녁에 공부 못하니까 오늘 배로 열심히 하자구 🤝