Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Advanced Challenge)

---

Section3 Unit3 [React] Custom Component
- 과제 React Custom Component (Advanced Challenge)

 

⭐️ 과제. React Custom Component

지난 Bare Minimum 구현에 이어 이번에는 Advanced 구현을 완료했다. 

Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum)

 

🏷️ Advanced Challenge: Autocomplete, ClickToEdit

 

✏️ 구현 과정 & 코드 

→ 몰랐거나 헷갈렸던 부분 위주로 ✨메모

 

5. Autocomplete

텍스트 input에 값을 입력하면, dropdown으로 input 값과 유사한 추천 검색 옵션을 보여주는 자동 완성 기능으로 사용자 경험을 향상할 수 있다.

 

✨ handleKeyUp

// selected의 초기값은 -1 (아무것도 선택되지 않은 상태)
const [selected, setSelected] = useState(-1);

const handleKeyUp = (e) => {
    if (hasText) { // input 값이 있을 때만 동작

      // 1. 마지막 인덱스까지 가면 더 이상 이동하지 않는 방법
      if (e.key === "ArrowDown" && selected < options.length - 1) {
        // option이 5개일 경우, 인덱스는 0-4까지
        // selected가 4가 되면 더이상 증가하지 않음
        setSelected(selected + 1);
      }

      // 2. 마지막 인덱스까지 가면 처음으로 돌아가는 방법
      /*
      if (e.key === "ArrowDown" ) {
        if (selected < options.length - 1) {
          setSelected(selected + 1);
        } else if (selected === options.length - 1) {
          setSelected(0);
        }
      }
      */

      if (e.key === "ArrowUp" && selected >= 0) {
        // selected가 0일 경우 -1이 되고,
        // selected가 -1일 경우 더 이상 동작하지 않음
        setSelected(selected - 1);
      }

      if (e.key === "Enter" & selected >= 0) {
        handleDropDownClick(options[selected]);
        setSelected(-1); // seleccted 값 초기화 
      }
  }
};

💬 Advanced Challenge 안의 Advanced 였던 dropdown 항목을 선택하고, Enter 키 입력 시 input값을 선택된 dropdown 항목의 값으로 변경하는 handleKeyUp 함수를 만드는 부분이 제일 어려웠었다.

 

✨ handleInputChange

const handleInputChange = (event) => {

    setInputValue(event.target.value);
    setHasText(true);
    setOptions( deselectedOptions.filter((el) => el.includes(event.target.value)) );

    // 대소문자 구분없이 필터
    // setOptions( deselectedOptions.filter((el) => el.toLowerCase().includes(event.target.value.toLowerCase())) );

    // 오후 라이브세션 코드
    // startsWith : 특정 문자로 시작하는지 확인하여 결과를 true 또는 false로 반환
    // setOptions(deselectedOptions.filter((option) => option.startsWith(event.target.value)))
};

💬 대소문자 구분없이 필터하는 방법과 startWith를 사용한 필터링하는 방법은 생각하지 못했었는데, 라이브세션을 통해 알게 되었다.

좀 더 생각해보니 🤔 검색을 할 때 대소문자의 구분이 없었던 것 같고, 대부분은 특정 문자가 포함된 검색어가 아닌 특정 문자로 시작하는 검색어가 노출되었던 것 같다..!💡

 

💬 그리고 수업시간에 누군가 한글 검색시 자음만 입력해도 포함된 문자열이 검색되는 방법을 질문했었다. 이것 또한 생각해보니 자음, 모음별로 검색이 가능해야 한다는 생각이 들었다. 

그래서 한글데이터를 자음, 모음 별로 검색하고 싶으면 한글 유니코드 자소분리를 해야한다고 했다. 

예를 들어 "골동품" 검색시 ㄱㅗㄹㄷㅗㅇㅍㅜㅁ 이렇게 자소분리를 시키는 것이다. 

골동품 (searchData: [ㄱ,ㅗ,ㄹ,ㄷ,ㅗ,ㅇ,ㅍ,ㅜ,ㅁ])

구현해보고 싶기는 한데, 다음 진도가 바빠서 일단은 패스하고 메모만 해두었다. 담에 꼭 해봐야지..!

 

6. ClickToEdit

ClickToEdit 컴포넌트는 input 창을 클릭하면 수정이 가능하고, input 창이 아닌 다른 곳을 클릭하면 수정한 내용이 반영되는 기능을 가진 컴포넌트이다.

 

ClickToEdit은 정말 무난하게 구현 완료해서 특별히 어려운 부분은 없었다. 

대신 UI가 좀 별로라서 CSS를 깔끔하게 수정해서 좀 더 보기좋게 만들었다.

 

 구현한걸 테스트하다가 한가지 문제를 발견했는데, 아래처럼 아무것도 입력하지 않은 상태로 마우스를 Blur 하게 되면 다시 수정이 안되는 부분이었다.

 

 이걸 다시 입력 가능하도록 구현해보려고 처음 떠올린 방법은, 아무것도 입력되지 않은 상태로 blur가 되면 이전 값으로 되돌리는 것이었다. 기존 코드에 존재하는 cache 객체를 사용해서 해보려고 했는데, 잘 되지가 않았다. 방법은 좀 더 생각해봐야겠지만, 훨씬 더 간단한 해결책이 있었다.

 재입력이 안되었던 이유는 수정을 하기 위해 클릭을 하는 부분인 span 요소의 크기가 사라지면서 클릭할 부분이 없어진 것이 문제였다. 그래서 간단하게 span 요소의 크기를 지정해주면 간단하게 해결할 수 있다.

 

export const InputBox = styled.div`
  /* text-align: center; */
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px; 
  border: 1px #bbb dashed;
  border-radius: 10px;
  margin-left: 1rem;

  & span {
    display:inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
`;

그래서 이렇게 styled component로 구현한 InputBox 컴포넌트 하위의 span 요소에 크기를 지정해 주었다. 

 

 

---

🌙  오늘의 회고

 react custom component advanced 까지 완료했다. 컴포넌트를 직접 구현하는 작업이 꽤 재미있었고, 다른 컴포넌트도 직접 만들어보면 좋을 것 같다는 생각이 들었다. 리덕스를 무난히 넘긴다면, 주말에 한 번 도전해 보는 것도 좋을 것 같다는 생각이 들었다. 🙂

 오늘 밤엔 내일 redux 학습을 위해 예습 좀 해야겠다. 리덕스도 이전에 공부를 하긴 했는데, 찍어먹기 식으로 해서 거의 기억도 안나는 듯 하다. 이번엔 제대로 공부해야지!